代码
提交代码
<!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>
运行结果