慕课在线编辑器

代码提交代码

<!DOCTYPE html>
<html>
<head>
	<title>使用滑动条缩放图片</title>
</head>
<body style="">
	<canvas id="canvas" style="display: block;margin: 0 auto;border: 1px solid #aaa;background:black">
		你的浏览器不支持canvas。
	</canvas>
	<input type="range" id="range" min="0.5" max="5.0" step="0.01" value="1.0" style="display: block;margin: 20px auto;width: 800px;"/>
</body>

<script>
		var canvas = document.getElementById("canvas");
		var context = canvas.getContext("2d");
		var slider = document.getElementById("range");
		var image = new Image(); 
		window.onload = function(){//浏览器加载完成之后触发
			canvas.width = 600;
			canvas.height = 400;
 
		image.src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"; //加载图片
 
			image.onload = function() {
				slider.onmousemove = function(){//通过监听鼠标事件动态获取滑块的value值
					var scale = slider.value;
					var width = canvas.width * scale; 
					var height = canvas.height * scale;
					var dx = canvas.width/2 - width/2;
					var dy = canvas.height/2 - height/2;
					context.clearRect(0, 0, canvas.width, canvas.height);
					context.drawImage(image, dx, dy, width, height);//设置图片的缩放度
				};
			};
 
		};
	</script>
</html>

运行结果