Canvas实现图片放大缩小移动操作

对于HTML5相信⼤家都不陌⽣，很早就出来了，但是貌似都没有真正的使⽤过。最近做项⽬时要实现这样⼀个需求：⼀个图⽚，⼤⼩不固定，要求能实现类似地图⼀样放⼤、缩⼩、移动功能。这⾥就很合适使⽤html5的canvas画布。实现步骤如下：

1. 定义⼀个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会不会简单些，以后有时间再试试吧。⽬前效果如下：