canvas怎么实现图片根据滑块放大缩小效果-创新互联

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

在东源等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供成都网站建设、成都网站制作 网站设计制作按需开发网站,公司网站建设,企业网站建设,品牌网站制作,全网营销推广,成都外贸网站制作,东源网站建设费用合理。

效果图:

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

图(1) 原始图

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

图(2) 缩小后

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

图(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怎么实现图片根据滑块放大缩小效果”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联网站建设公司行业资讯频道,感谢各位的阅读!

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


当前文章:canvas怎么实现图片根据滑块放大缩小效果-创新互联
文章链接:http://scyanting.com/article/dhogeg.html