canvas-滑杆控制图片缩放-CSDN博客

本文链接：https://blog.csdn.net/lsy__lsy/article/details/80335526

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>自由缩放</title>
<style type="text/css">
body{ background: #000;}
</style>
</head>
<body>
<div class="">
<canvas id="canvas" width="1024" height="768" style="background: #fff; border: 1px solid #aaa; display: block; margin:100px auto 0"></canvas>

<input type="range" id="scale-range"
style="display: block; margin: 20px auto; width: 800px;"
min="0.5" max="3.0" step="0.01" value="1">
</div>
<script>
var canvas=document.getElementById('canvas');
var context=canvas.getContext("2d")
var slider=document.getElementById("scale-range")
var image=new Image()
window.οnlοad=function(){
canvas.width=768;
canvas.height=768;
var scale=slider.value;
image.src="timg.jpg";
image.οnlοad=function(){
//context.drawImage(image,0,0,canvas.width,canvas.height)
//context.drawImage(image,0,0,canvas.width,canvas.height)
//创建一个新的函数
drawImageByScale(scale)
slider.οnmοusemοve=function(){
scale=slider.value;
drawImageByScale(scale)
}
}
}

function drawImageByScale(scale){
context.clearRect(0,0,canvas.width,canvas.height); //清空画布
var imageWidth=768*scale;
var imageHeight=768*scale ;
var dx=canvas.width/2-imageWidth/2
var dy=canvas.height/2-imageHeight/2
context.drawImage(image,dx,dy,imageWidth,imageHeight);

}
</script>
</body>
</html>