用canvas实现用滑竿控制图片放大缩小

首先我们要准备一个画布和一个滑竿
<canvas id="canvas" width="1152" height="768"></canvas>
<input type="range" id="scale-range" value="1.0" min="0.5" max="3.0" step="0.01" style="display: block;margin: 20px auto; width: 800px;" />

接下来js部分:
var image=new Image();
window.onload=function(){
var scale=slider.value;
image.src="img/1.jpg";
image.onload=function(){
drawImageByScale(scale);
slider.onmousemove=function(){
scale=slider.value;
drawImageByScale(scale);
}
}
}

function drawImageByScale(scale){
var imageWidth=1152scale;
var imageHeight=768scale;
var dx=canvas.width/2-imageWidth / 2;
var dy=canvas.height/2-imageHeight / 2;
context.clearRect(0,0,canvas.width,canvas.height);
context.drawImage(image,dx,dy,imageWidth,imageHeight);
}

下面就是代码实现的效果:

Paste_Image.png