源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2022-07-19 13:50 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:canvas实现图片根据滑块放大缩小效果
[b]效果图:[/b] [img]http://files.jb51.net/file_images/article/201702/2017224114328340.png?2017124114613[/img] 图(1) 原始图 [img]http://files.jb51.net/file_images/article/201702/2017224114338507.png?2017124114635[/img] 图(2) 缩小后 [img]http://files.jb51.net/file_images/article/201702/2017224114347299.png?2017124114429[/img] 图(3) 放大后 [b]代码如下:[/b]
<!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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持编程素材网!
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部