小编给大家分享一下canvas怎么实现图片根据滑块放大缩小效果，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

常宁ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为成都创新互联公司的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：13518219792（备注：SSL证书合作）期待与您的合作！

效果图：

图（1） 原始图

图（2） 缩小后

图（3） 放大后

代码如下：

 
 
 
 
  #canvas1{
  box-shadow: 3px 3px 10px black;
  }
 
 
 
 
 
 
 
 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)
 }
 }
 

看完了这篇文章，相信你对“canvas怎么实现图片根据滑块放大缩小效果”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！

文章名称：canvas怎么实现图片根据滑块放大缩小效果
标题URL：http://kswjz.com/article/gehghd.html