canvas紅包照片實(shí)例分享
效果:
點(diǎn)擊RESET:隨機(jī)顯示剪輯區(qū)域;
點(diǎn)擊SHOW:顯示完整清晰圖片;
圖(1)點(diǎn)擊RESET
圖(2)點(diǎn)擊SHOW
代碼如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas紅包照片</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <style type="text/css"> #blur_div{ width: 500px; height: 334px; margin: 0 auto; position: relative; margin-top:100px; } #blur_img{ display: block; width: 500px; height: 334px; margin: 0 auto; filter: blur(15px);/*CSS3模糊*/ -webkit-filter: blur(15px); -moz-filter: blur(15px); -ms-filter: blur(15px); -o-filter: blur(15px); position:absolute; left: 0px; top: 0px; z-index: 0; } #canvas{ display: block; margin: 0 auto; position:absolute; left: 0px; top: 0px; z-index: 100; /* background-color:red;*/ } .button{ display:block; position:absolute; z-index:200; width:80px; height:30px; color:white; text-decoration:none; text-align:center; line-height:30px; border-radius:5px; } #reset_button{ left:100px; bottom:20px; background-color:#058; } #reset_button:hover{ background-color:#047; } #show_button{ right:100px; bottom:20px; background-color:#085; } #show_button:hover{ background-color:#074; } </style> </head> <body> <div id="blur_div"> <img id="blur_img" src="http://cdn.attach.qdfuns.com/notes/pics/201702/27/221935e35ugwllljg10912.jpg" /> <canvas id="canvas"></canvas> <a href="javascript:reset()" rel="external nofollow" class="button" id="reset_button">RESET</a> <a href="javascript:show()" rel="external nofollow" class="button" id="show_button">SHOW</a> </div> <script> var canvasWidth = 500; var canvasHeight = 334; var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); canvas.width = canvasWidth; canvas.height = canvasHeight; /*在canvas上繪制清晰的圖片*/ var image = new Image(); var radius = 40; var clippingRegion = {x:-1,y:-1,r:radius};/*初始化剪輯區(qū)域*/ image.src = "http://cdn.attach.qdfuns.com/notes/pics/201702/27/221935e35ugwllljg10912.jpg"; image.onload = function(e){ initCanvas(); } function initCanvas(){ clippingRegion = {x:Math.random()*(canvas.width-2*radius)+radius, y:Math.random()*(canvas.height-2*radius)+radius, r:radius};/*隨機(jī)剪輯區(qū)域*/ draw(image,clippingRegion); } function setClippingRegion(clippingRegion){ context.beginPath(); context.arc(clippingRegion.x,clippingRegion.y,clippingRegion.r,0,2*Math.PI,false);/*繪制剪輯區(qū)域的路徑*/ context.clip(); } function draw(image,clippingRegion){ context.clearRect(0,0,canvas.width,canvas.height);/*清除畫(huà)布*/ context.save(); setClippingRegion(clippingRegion);/*重新設(shè)置剪輯區(qū)域*/ context.drawImage(image,0,0); context.restore(); } /*重置顯示剪輯區(qū)域*/ function reset(){ initCanvas(); } /*顯示整個(gè)清晰圖片*/ function show(){ var theAnimation = setInterval( function(){ clippingRegion.r += 20; if(clippingRegion.r>2*Math.max(canvas.width,canvas.height)){ clearInterval(theAnimation); } draw(image,clippingRegion); },20) } </script> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
相關(guān)文章
javascript使用substring實(shí)現(xiàn)的展開(kāi)與收縮文字功能示例
這篇文章主要介紹了javascript使用substring實(shí)現(xiàn)的展開(kāi)與收縮文字功能,涉及javascript元素遍歷與屬性設(shè)置相關(guān)操作技巧,需要的朋友可以參考下2019-06-06JS如何實(shí)現(xiàn)手機(jī)端輸入驗(yàn)證碼效果
這篇文章主要介紹了JS如何實(shí)現(xiàn)手機(jī)端輸入驗(yàn)證碼效果,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05微信小程序開(kāi)發(fā)之實(shí)現(xiàn)心情記事本
這篇文章主要為大家詳細(xì)介紹了如何通過(guò)微信小程序開(kāi)發(fā)一個(gè)簡(jiǎn)單的心情記事本,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以和小編一起學(xué)習(xí)一下2023-01-01JavaScript設(shè)計(jì)模式之觀察者模式(發(fā)布者-訂閱者模式)
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之觀察者模式(發(fā)布者-訂閱者模式),本文詳細(xì)的講解了JavaScript中的觀察者模式,需要的朋友可以參考下2014-09-09JS實(shí)現(xiàn)提示框跟隨鼠標(biāo)移動(dòng)
在本篇內(nèi)容里小編給各位整理了一篇關(guān)于JS實(shí)現(xiàn)提示框跟隨鼠標(biāo)移動(dòng)的相關(guān)實(shí)例代碼,需要的朋友們學(xué)習(xí)下。2019-08-08JavaScript String(字符串)對(duì)象的簡(jiǎn)單實(shí)例(推薦)
下面小編就為大家?guī)?lái)一篇JavaScript String(字符串)對(duì)象的簡(jiǎn)單實(shí)例(推薦)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08