canvas實(shí)現(xiàn)圖片根據(jù)滑塊放大縮小效果

更新時(shí)間：2017年02月24日 11:44:34 作者：z5895451

本文主要介紹了canvas實(shí)現(xiàn)圖片根據(jù)滑塊放大縮小效果的實(shí)例，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧

效果圖：

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

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

javaScript事件學(xué)習(xí)小結(jié)（四）event的公共成員（屬性和方法）
這篇文章主要介紹了javaScript事件學(xué)習(xí)小結(jié)（四）event的公共成員（屬性和方法）的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-06-06
基于javascript實(shí)現(xiàn)單選及多選的向右和向左移動(dòng)實(shí)例
這篇文章主要介紹了基于javascript實(shí)現(xiàn)單選及多選的向右和向左移動(dòng),涉及javascript針對(duì)頁(yè)面元素的動(dòng)態(tài)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-07-07
javascript 偽數(shù)組實(shí)現(xiàn)方法
能通過(guò)Array.prototype.slice轉(zhuǎn)換為真正的數(shù)組的帶有l(wèi)ength屬性的對(duì)象。
2010-10-10
原生js實(shí)現(xiàn)放大鏡特效
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)放大鏡特效，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
在ASP.NET MVC項(xiàng)目中使用RequireJS庫(kù)的用法示例
這篇文章主要介紹了在ASP.NET MVC項(xiàng)目中使用RequireJS的用法示例,文中主要講解了網(wǎng)站項(xiàng)目的一些基本目錄結(jié)構(gòu)思想,并給出了一個(gè)半自動(dòng)壓縮的例子,的朋友可以參考下
2016-02-02
JavaScript設(shè)計(jì)模式之裝飾者模式實(shí)例詳解
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之裝飾者模式,結(jié)合實(shí)例形式較為詳細(xì)的分析了裝飾者模式的概念、原理及javascript定義、使用裝飾者模式的相關(guān)操作技巧,需要的朋友可以參考下
2019-01-01
微信小程序表單驗(yàn)證功能完整實(shí)例
這篇文章主要介紹了微信小程序表單驗(yàn)證功能,結(jié)合完整實(shí)例形式分析了微信小程序完成表單驗(yàn)證功能所涉及的視圖與邏輯操作技巧,需要的朋友可以參考下
2017-12-12
JS中style屬性
JS中style屬性...
2006-10-10
javascript插件開(kāi)發(fā)的一些感想和心得
這篇文章主要介紹了javascript插件開(kāi)發(fā)的一些感想和心得,需要的朋友可以參考下
2016-02-02
用于CSS代碼壓縮與格式化的javascript函數(shù)代碼
呵呵，發(fā)現(xiàn)只要幾行ＪＳ代碼就可實(shí)現(xiàn)css的壓縮與格式化，非常不錯(cuò)。
2009-12-12