canvas控制圖片縮放
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no, email=no, adress=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>
<body>
<canvas id="canvas" style="border:1px solid blue;">
您的瀏覽器不支援canvas
</canvas></br>
<input type="range" id="slider" value="1" max="3" min="0.5" step="0.01" style="width:598px;" />
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var image = new Image();
var slider = document.getElementById("slider");
window.onload = function() {
canvas.width = 598;
canvas.height = 397;
image.src = "picture_01.jpg";
image.onload = function(){
drawImageByScale();
slider.onmousemove = function(){
var scale = slider.value;
drawImageByScale(scale);
};
}
};
function drawImageByScale(scale){
var scale = scale || 1;
var imageWidth = 598 * scale;
var imageHeight = 397 * scale;
var dx = (canvas.width - imageWidth)/2;
var dy = (canvas.height - imageHeight)/2;
context.clearRect(0,0,canvas.width,canvas.height);
context.drawImage(image,dx,dy,imageWidth,imageHeight);
}
</script>
</body>
</html>
drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);
引數分別表示：圖片物件，從圖片的X軸處，從圖片的Y軸處，裁剪的寬度，裁剪的高度，從canvas的X軸處，從canvas的Y軸處，繪製的寬度，繪製的高度
如果省略第2-5個引數，預設不裁剪，按照圖片實際大小繪製
注意：drawImage()函式務必寫在image.onload = function(){}中