对于HTML5相信大家都不陌生，很早就出来了，但是貌似都没有真正的使用过。最近做项目时要实现这样一个需求：一个图片，大小不固定，要求能实现类似地图一样放大、缩小、移动功能。这里就很合适使用html5的canvas画布。
实现步骤如下：
1. 定义一个canvas标签。
<canvas id="bargraphCanvas" width="500" height="600"></canvas>
这里有个很重要的地方，就是这个width和height一定要写，否则不能实现。同时，画布的宽高只能用这个方法写，css设置有问题。大家可以试试。
2.初始化canvas,以及其他所需对象。
var canvas, context;
var img,//图片对象
imgIsLoaded,//图片是否加载完成;
imgX = 0,
imgY = 0,
imgScale = 1;
(function int() {
canvas = document.getElementById('bargraphCanvas'); //画布对象
context = canvas.getContext('2d');//画布显示二维图片
loadImg();
})();
3.定义一个image对象并设置好它的onload事件和src属性。
function loadImg() {
img = new Image();
img.onload = function () {
imgIsLoaded = true;
drawImage();
}
img.src = '../../Content/images/mayday.jpg';
}
4.调用canvas的draw方法。
function drawImage() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(
img, //规定要使用的图像、画布或视频。
0, 0, //开始剪切的 x 坐标位置。
img.width, img.height, //被剪切图像的高度。
imgX, imgY,//在画布上放置图像的 x 、y坐标位置。
img.width * imgScale, img.height * imgScale //要使用的图像的宽度、高度
);}
这里要介绍下canvas的drawImage方法，参考w3school，drawImage是可以实现图片的裁剪功能，参数的含义以及是否必填如下：
** img 规定要使用的图像、画布或视频。
** sx 可选。开始剪切的 x 坐标位置。
** sy 可选。开始剪切的 y 坐标位置。
** swidth 可选。被剪切图像的宽度。
** sheight 可选。被剪切图像的高度。
** x 在画布上放置图像的 x 坐标位置。
** y 在画布上放置图像的 y 坐标位置。
** width 可选。要使用的图像的宽度。（伸展或缩小图像）
** height 可选。要使用的图像的高度。（伸展或缩小图像）
5.到这里，如果代码没有问题的话，图片就可以成功地在canvas中显示了。下面就是实现放大、缩小、平移操作。在初始化canvas的同时也初始化其事件，如下：
/*事件注册*/
function canvasEventsInit() {
canvas.onmousedown = function (event) {
var pos = windowToCanvas(event.clientX, event.clientY); //坐标转换，将窗口坐标转换成canvas的坐标
canvas.onmousemove = function (evt) { //移动
canvas.style.cursor = 'move';
var posl = windowToCanvas(evt.clientX, evt.clientY);
var x = posl.x - pos.x;
var y = posl.y - pos.y;
pos = posl;
imgX = x;
imgY = y;
drawImage(); //重新绘制图片
};
canvas.onmouseup = function () {
canvas.onmousemove = null;
canvas.onmouseup = null;
canvas.style.cursor = 'default';
};
};
canvas.onmousewheel = canvas.onwheel = function (event) { //滚轮放大缩小
var pos = windowToCanvas (event.clientX, event.clientY);
event.wheelDelta = event.wheelDelta ? event.wheelDelta : (event.deltalY * (-40)); //获取当前鼠标的滚动情况
if (event.wheelDelta > 0) {
imgScale *= 2;
imgX = imgX * 2 - pos.x;
imgY = imgY * 2 - pos.y;
} else {
imgScale /= 2;
imgX = imgX * 0.5 pos.x * 0.5;
imgY = imgY * 0.5 pos.y * 0.5;
}
drawImage(); //重新绘制图片
};
}
/*坐标转换*/
function windowToCanvas(x,y) {
var box = canvas.getBoundingClientRect(); //这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离
return {
x: x - box.left - (box.width - canvas.width) / 2,
y: y - box.top - (box.height - canvas.height) / 2
};
}
按照这些步骤，图片的加载，放大、缩小、平移都已经实现了。个人感觉这个比较难的地方在于，这个是使用原生javascript写的，如果使用jquery会不会简单些，以后有时间再试试吧。目前效果如下：
