代碼
提交代碼
<!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(){//瀏覽器加載完成之后觸發(fā)
canvas.width = 600;
canvas.height = 400;
image.src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"; //加載圖片
image.onload = function() {
slider.onmousemove = function(){//通過監(jiān)聽鼠標(biāo)事件動態(tài)獲取滑塊的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);//設(shè)置圖片的縮放度
};
};
};
</script>
</html>
運(yùn)行結(jié)果