首先我們要準(zhǔn)備一個(gè)畫(huà)布和一個(gè)滑竿
<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;" />
接下來(lái)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);
}
下面就是代碼實(shí)現(xiàn)的效果:
