canvas实现图片根据滑块放大缩小效果

2019-11-19 17:25:25

字体：大中小

来源：转载

供稿：网友

效果图：

图（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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持武林网！

上一篇：Angular.js实现多个checkbox只能选择一个的方法示例

下一篇：详解JS中的立即执行函数