canvas整体放大_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 = &#