對於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會不會簡單些，以后有時間再試試吧。目前效果如下：
