canvas實(shí)現(xiàn)圖片根據(jù)滑塊放大縮小效果
更新時(shí)間：2017年02月24日 11:44:34 作者：z5895451
本文主要介紹了canvas實(shí)現(xiàn)圖片根據(jù)滑塊放大縮小效果的實(shí)例，具有很好的參考價(jià)值，下面跟著小編一起來看下吧
效果圖：
圖（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>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！
您可能感興趣的文章:
- Javascript保存網(wǎng)頁為圖片借助于html2canvas庫實(shí)現(xiàn)
- javascript結(jié)合canvas實(shí)現(xiàn)圖片旋轉(zhuǎn)效果
- JavaScript+html5 canvas實(shí)現(xiàn)圖片破碎重組動(dòng)畫特效
- 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對圖片進(jìn)行處理
相關(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針對頁面元素的動(dòng)態(tài)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
javascript 偽數(shù)組實(shí)現(xiàn)方法
能通過Array.prototype.slice轉(zhuǎn)換為真正的數(shù)組的帶有l(wèi)ength屬性的對象。2010-10-10
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)放大鏡特效，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
在ASP.NET MVC項(xiàng)目中使用RequireJS庫的用法示例
這篇文章主要介紹了在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)證功能,結(jié)合完整實(shí)例形式分析了微信小程序完成表單驗(yàn)證功能所涉及的視圖與邏輯操作技巧,需要的朋友可以參考下2017-12-12
JS中style屬性...2006-10-10
這篇文章主要介紹了javascript插件開發(fā)的一些感想和心得,需要的朋友可以參考下2016-02-02
用于CSS代碼壓縮與格式化的javascript函數(shù)代碼
呵呵，發(fā)現(xiàn)只要幾行ＪＳ代碼就可實(shí)現(xiàn)css的壓縮與格式化，非常不錯(cuò)。2009-12-12