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í)也希望多多支持腳本之家!
您可能感興趣的文章:
- Javascript保存網(wǎng)頁(yè)為圖片借助于html2canvas庫(kù)實(shí)現(xiàn)
- javascript結(jié)合canvas實(shí)現(xiàn)圖片旋轉(zhuǎn)效果
- JavaScript+html5 canvas實(shí)現(xiàn)圖片破碎重組動(dòng)畫(huà)特效
- HTML5+Canvas調(diào)用手機(jī)拍照功能實(shí)現(xiàn)圖片上傳(上)
- HTML5+Canvas調(diào)用手機(jī)拍照功能實(shí)現(xiàn)圖片上傳(下)
- 用canvas 實(shí)現(xiàn)個(gè)圖片三角化(LOW POLY)效果
- HTML5 canvas 9繪制圖片實(shí)例詳解
- Canvas + JavaScript 制作圖片粒子效果
- canvas壓縮圖片轉(zhuǎn)換成base64格式輸出文件流
- 一步步教你利用Canvas對(duì)圖片進(jìn)行處理
相關(guān)文章
js局部刷新頁(yè)面時(shí)間具體實(shí)現(xiàn)
這篇文章介紹了js局部刷新頁(yè)面時(shí)間具體實(shí)現(xiàn),需要的朋友可以參考一下2013-07-07JS實(shí)現(xiàn)微信彈出搜索框 多條件查詢(xún)功能
這篇文章主要介紹了JS實(shí)現(xiàn)微信彈出搜索框 多條件查詢(xún)功能的實(shí)例代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-12-12基于JS實(shí)現(xiàn)一個(gè)隨機(jī)生成驗(yàn)證碼功能
這篇文章主要介紹了基于JS實(shí)現(xiàn)一個(gè)隨機(jī)生成驗(yàn)證碼功能,隨機(jī)生成一個(gè)四位數(shù)的驗(yàn)證碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05WEB泡泡堂2.0(圖形界面+電腦對(duì)玩)(javascript)
WEB泡泡堂2.0(圖形界面+電腦對(duì)玩)(javascript)2007-01-01H5基于iScroll實(shí)現(xiàn)下拉刷新和上拉加載更多
這篇文章主要為大家詳細(xì)介紹了H5基于iScroll實(shí)現(xiàn)下拉刷新和上拉加載更多效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07