この記事では主に、スライダーに応じて写真を拡大・縮小する効果を実現するキャンバスの例を紹介します。以下のエディターで見てみましょう
。
写真(1)元の写真
写真(2)ズームアウト後
写真(3)ズームイン後
コードは次のとおりです:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#canvas1{
box-shadow: 3px 3px 10px black;
}
</style>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<input type="range" name="slider" id="silder" value="0.5" max="1" min="0" step="0.01"/>
</body>
<script type="text/javascript">
var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");
var slider = document.getElementById("silder");
var scale = slider.value;
creatImg(scale);
slider.onmousedown = function() {
slider.onmousemove = function () {
scale = slider.value;
creatImg(scale);
}
}
function creatImg (scale) {
var myImg = new Image();
myImg.src = "https://gss0.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/902397dda144ad34ac75c376d7a20cf430ad857d.jpg"
var imgh = canvas.height * scale;
var imgw = canvas.width * scale;
var x = canvas.width / 2 - imgw / 2;
var y = canvas.height / 2 - imgh / 2
myImg.onload = function () {
context.clearRect(0 , 0 , canvas.width , canvas.height);
context.drawImage(myImg , x , y ,imgw , imgh)
}
}
</script>
</html>スライダーに基づいたキャンバス実装の写真をもっと見る ズームイン 削減効果に関連する記事については、PHP 中国語 Web サイトに注目してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
