1.前台代码

<canvas id="canvasOne" class="myCanvas" width="500" height="500"></canvas>
<script>
/***************绘制图像,放大缩小实例******************/
var canvas = document.getElementById('canvasOne');
var ctx = canvas.getContext('2d');
//加载图片
var scale = 0.1;//缩放比例
var img = new Image();
img.onload = function () {
reShow();
}
img.src = '../images/1.jpg';
//根据缩放比例,显示图片
function reShow() {
var cWidth = canvas.width;
var cHeight = canvas.height; var iWidth = img.width;
var iHeight = img.height;
var width = iWidth * scale;
var height = iHeight * scale; //居中显示
var left = (cWidth - width) / 2;
var top = (cHeight - height) / 2; //清空画布极限值 --失败
//var maxWidth = iWidth > width ? iWidth : width;
//var maxHeight = iHeight > height ? iHeight : height;
//var minLeft = left < 0 ? left : 0;
//var minTop = top < 0 ? top : 0;
//ctx.clearRect(0,0,cWidth,cHeight); //清除画布方式2 --失败
//var number = 1 / scale;
//var cWidth = canvas.width * number;
//var cHeight = canvas.height * number;
//ctx.clearRect(-cWidth, -cHeight, cWidth * 2, cHeight * 2); //清除画布3
ctx.clearRect(-spanLeft, -spanTop, canvas.width, canvas.height);
ctx.drawImage(img, left, top, width, height);
}
//滚轮时间
addMouseWheel(canvas, function (e) {
var temp = e.delta > 0 ? 0.1 : -0.1;
scale += temp;
//缩放极限判断
scale = scale < 0.1 ? 0.1 : scale;
scale = scale > 1 ? 1 : scale;
reShow();
}); //鼠标移动事件
//1.有一个鼠标移动,重绘图片的bug
var oldX = oldY = 0;
var isMove = false;
var spanLeft = spanTop = 0;
canvas.onmousedown = function (e) {
oldX = e.clientX;
oldY = e.clientY;
isMove = true;
}
canvas.onmousemove = function (e) {
if (isMove) {
var currentX = e.clientX;
var currentY = e.clientY; //计算移动的距离
var spanX = currentX - oldX;
var spanY = currentY - oldY;
spanLeft += spanX;
spanTop += spanY;
ctx.translate(spanX, spanY);
reShow(); //记录当前结果
oldX = currentX;
oldY = currentY;
}
}
canvas.onmouseup = function (e) {
oldX = oldY = 0;
isMove = false;
}
canvas.onmouseleave = function (e) {
oldX = oldY = 0;
isMove = false;
} </script>

2.绑定鼠标滚轮事件

//绑定dom  元素的mousewheel 事件
//并设置 对应滚动的是 e.detlta >0 向上滚动 <0 向下滚动
(function (window) {
window.addMouseWheel = function (dom, hander) {
if (document.mozHidden !== undefined) {
//FF
dom.addEventListener('DOMMouseScroll', function (e) {
e.delta = -(e.detail || 0) / 3
hander(e);
})
} else {
if (window.addEventListener) {
//IE,google 等
dom.addEventListener('mousewheel', function (e) {
e.delta = e.wheelDelta / 120;
hander(e);
});
} else if (window.attachEvent) {
// IE 低版本
dom.attachEvent('onmousewheel', function (e) {
e.delta = e.wheelDelta / 120;
hander(e);
});
}
}
}
})(window);

显示结果:

HTML5 Canvas图像放大、移动实例1的更多相关文章

  1. HTML5 Canvas图片操作简单实例1

    1.加载显示图片 <canvas id="canvasOne" class="myCanvas" width="500" height ...

  2. html5 canvas 圆形抽奖的实例

    年底没啥,抽空学习了canvas,写了个html5抽奖的代码,造了个轮子,有用的童鞋可以拿走. 其中,canvas.onclick触发抽奖行为,概率可以在core.lottery()函数上添加,美化也 ...

  3. HTML5 canvas图像绘制方法与像素操作属性和方法

    图像绘制方法 drawImage()        向画布上绘制图像.画布或视频 像素操作属性和方法 width                                返回 ImageData ...

  4. HTML5 Canvas Text文本居中实例

    1.代码: <canvas width="700" height="300" id="canvasOne" class="c ...

  5. HTML5 Canvas显示本地图片实例1、Canvas预览图片实例1

    1.前台代码: <input id="fileOne" type="file" /> <canvas id="canvasOne&q ...

  6. html5 canvas画不出图像的原因

    很久没写博客了,今年过年的时候,家里出了意外,现在心里依然很难受.6月份之前一直忙着写毕业论文,答辩完6月初回公司继续上班,今天刚好周末有空,就写下之前碰到一个问题. 做一个图像查看器(基于Chrom ...

  7. 【HTML5】Canvas图像

    把一幅图像放置到画布上, 使用以下方法: drawImage(Img,x,y); 注:这里的Img必须是一个图像对象.   显示一个canvas图像: <!DOCTYPE html> &l ...

  8. HTML5<canvas>标签:使用canvas元素在网页上绘制渐变和图像(2)

    详细解释HTML5 Canvas中渐进填充的参数设置与使用,Canvas中透明度的设置与使用,结合渐进填充与透明度支持,实现图像的Mask效果. 一:渐进填充(Gradient Fill) Canva ...

  9. html5 canvas用动画的形式装载图像

    本示例使用HTML5 canvas,简单的编写了装载图片效果, 请使用支持HTML5的浏览器预览效果: 下图为以逐渐横向栅格的效果图 html部分: <!DOCTYPE html> < ...

随机推荐

  1. 1.1 语言与平台 [Java]

    Java语言是静态类型.面向对象的语言: Java平台是提供运行时环境的软件: 生产和使用Java代码的整个过程:.java (javac) .class (类加载器) 转换后的.class (解释器 ...

  2. 制作EDM 邮件规范

    邮件模板最主要是保证兼容性,很多邮箱的过滤规则不同,因此邮件页面要使用最简单原始的代码实现内容展现. 一,采用table嵌套布局,避免用div布局,因为DIV布局会用到float等浮动样式,一些邮箱会 ...

  3. javascript之闭包深入理解(一)

    曾经在开始学习javascript的时候,很是不理解闭包的概念.今天想对它详细的剖析. 在说清楚闭包之前,必须先清楚作用域链. 作用域链 我们知道,执行环境是js中最为重要的一个概念.执行环境定义了变 ...

  4. JS对undefined,null,NaN判断

    1.判断undefined: <span style="font-size: small;">var tmp = undefined; if (typeof(tmp) ...

  5. Android实现三级联动下拉框 下拉列表spinner

    Android实现(省.市.县)三级联动下拉框 下拉列表spinner 转载请注明出处: http://www.goteny.com/articles/2013/11/46.html http://w ...

  6. 51单片机C语言学习笔记8:单片机C51编程规范

    1.单片机C51编程规范- 前言  为了提高源程序的质量和可维护性,从而最终提高软件产品生产力,特编写此规范. 2.单片机C51编程规范-范围 本标准规定了程序设计人员进行程序设计时必须遵循的规范.本 ...

  7. perl dbi 测试 mysql wait_timeout

    The number of seconds the server waits for activity on a noninteractive connection before closing it ...

  8. 【HDOJ】2526 浪漫手机

    字符串大水题. #include <cstdio> #include <cstring> #include <cstdlib> #define MAXN 105 t ...

  9. HDOJ 2191

    多重背包. 模版. #include <iostream> #include <stdio.h> #include <stdlib.h> #include < ...

  10. linux image writes boot log to console