本篇文章來源慕課網(wǎng)課程《canvas玩轉(zhuǎn)紅包照片》，用canvas及css3結(jié)合，實(shí)現(xiàn)紅包照片的效果，并不做支付過程，代替的是使用2個(gè)按鈕，顯示清晰圖片和重置圓圈可見區(qū)域。未做移動(dòng)的屏幕適應(yīng)
微信紅包照片效果圖一張模糊圖片，只有魚哥小圓圈的區(qū)域是清晰可見
原理分析：
1、先在頁面放置一張?jiān)瓐D片image，用css3的filter做模糊處理
2、在圖片區(qū)域上方放置一個(gè)與圖片image大小一樣的canvas，放置整張清晰圖片
3、通過canvas的圖片剪輯方法，剪輯出一個(gè)圓圈區(qū)域，就達(dá)到了只顯示一個(gè)圓圈區(qū)域的效果
代碼及解析
目錄結(jié)構(gòu)：
>
index.html，blur.js，blur.css
index.htm頁面代碼
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="height=device-height,width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> <title>模糊紅包效果</title> <link rel="stylesheet" href="css/blur.css" rel="external nofollow" /> <script type="text/javascript" src="js/jquery-2.1.0.js"></script> </head> <body> <div id="blur-div"> <img id="blur-image" src="img/gd.jpg" /> <canvas id="canvas"></canvas><!--大小要在js設(shè)置，不要在css設(shè)置--> <a href="javascript:reset()" rel="external nofollow" class="button" id="reset-button">重置</a> <a href="javascript:show()" rel="external nofollow" class="button" id="show-button">顯示</a> </div> <script type="text/javascript" src="js/blur.js"></script> </body></html>
css代碼blur.css
*{ margin:0px; padding: 0px;}#blur-div{ width:350px; height:220px; margin:0 auto; position: relative; overflow: hidden;}.button{ display: block; position: absolute; z-index: 200;/*按鈕在最上面*/ width: 60px; height: 30px; color: white; text-decoration: none; text-align: center; line-height: 30px; border-radius: 2px;}#reset-button{ left: 40px; bottom: 20px; background-color: #058;}#reset-button:hover{ background-color: #047;}#show-button{ right: 40px; bottom: 20px; background-color: #085;}#show-button:hover{ background-color: #074;}#canvas{ display:block; margin:0 auto; position: absolute; left:0px; top:0px; /*canvas在image之上，在按鈕下，z-index大于image,小于btn*/ z-index: 100;}#blur-image{ display:block; width:350px; height:220px; margin:0 auto; /*模糊效果*/ filter:blur(20px); -webkit-filter: blur(20px); -moz-filter:blur(20px); -ms-filter: blur(20px); -o-filter:blur(20px); position: absolute; left:0px; top:0px; z-index: 0;}設(shè)置canvas大小要和image大小一樣
javascript代碼，方法將分片段進(jìn)行講解：
初始化一些參數(shù)
var canvasWidth = window.innerWidth; //最外層div寬=窗口寬高，為了適應(yīng)var canvasHeight = window.innerHeight;var canvas = document.getElementById("canvas");//獲取到canvas元素對(duì)象var context = canvas.getContext("2d");//獲取2d context//設(shè)置canvas大小和最外層div寬高一樣canvas.width = canvasWidth;canvas.height = canvasHeight;//用canvas顯示清晰圖像var image = new Image();image.src = "img/gd.jpg";//剪輯區(qū)域var radius = 30;//剪輯區(qū)域圓的半徑var clippingRegion;//剪輯區(qū)域?qū)ο?/pre>底層圖片用css3設(shè)置過后就已經(jīng)可以顯示在頁面上，是一張模糊過的圖片，下一步就是在canvas上繪制剪輯圖片
image.onload = function(e) { //此處js代碼設(shè)置blur-div 和canvas寬高調(diào)整 $('#blur-div').css("width", canvasWidth + "px"); $('#blur-div').css("height", canvasHeight + "px"); $('#blur-image').css("width", image.width + "px");//因?yàn)閳D像大小變化，所以重新設(shè)置 $('#blur-image').css("height", image.height + "px"); initCanvas();//這是初始化canvas的方法}function initCanvas() { //重置剪輯區(qū)域，歸位,隨機(jī) clippingRegion = { //保證剪輯區(qū)域一定在有圖像的地方 x: Math.random() * (canvas.width - 2 * radius) + radius, y: Math.random() * (canvas.height - 2 * radius) + radius, r: radius }; draw(image, clippingRegion);//這是繪制image的方法}//設(shè)置剪輯區(qū)域function setClippingRegion(clippingRegion) { context.beginPath(); //創(chuàng)建路徑 context.arc(clippingRegion.x, clippingRegion.y, clippingRegion.r, 0, Math.PI * 2, false); //畫圓形 context.clip();}function draw(image, clippingRegion) { context.clearRect(0, 0, canvas.width, canvas.height); context.save(); //圖像繪制前，確定剪輯區(qū)域 setClippingRegion(clippingRegion); context.drawImage(image, 0, 0); context.restore();}點(diǎn)擊顯示按鈕show，完全顯示清晰圖像，復(fù)用draw函數(shù)，將剪輯區(qū)域變大
function show() { //添加動(dòng)畫 var theAnimation = setInterval(function() { clippingRegion.r += 20; //慢慢擴(kuò)大顯示 //邊界條件 if (clippingRegion.r > 2 * Math.max(canvas.width, canvas.height)) { //停止動(dòng)畫，否則函數(shù)執(zhí)行不停止 clearInterval(theAnimation); } draw(image, clippingRegion);//循環(huán)執(zhí)行draw方法，慢慢將剪輯區(qū)域的半徑擴(kuò)大，實(shí)現(xiàn)動(dòng)畫效果 }, 30);//bug，顯示之后立即點(diǎn)擊重置，還是會(huì)打開圖片，可能是因?yàn)槎〞r(shí)器還沒結(jié)束}重置則再次初始化canvas就行了，在initCanvas已經(jīng)做了隨機(jī)位置，所以每次點(diǎn)擊重置都是隨機(jī)位置的剪輯區(qū)域
//重置，initCanvasfunction reset() { initCanvas();}完整blur.js代碼
var canvasWidth = window.innerWidth; //最外層div寬=窗口寬高，為了適應(yīng)var canvasHeight = window.innerHeight;var canvas = document.getElementById("canvas");var context = canvas.getContext("2d");//設(shè)置canvas大小和最外層div寬高一樣canvas.width = canvasWidth;canvas.height = canvasHeight;//用canvas顯示清晰圖像var image = new Image();var radius = 30;//剪輯區(qū)域var clippingRegion;image.src = "img/gd.jpg";//因?yàn)閳D像加載需要時(shí)間，所以用onload方法，等待圖片加載完成后再執(zhí)行函數(shù)image.onload = function(e) { //blur-div 和canvas寬高調(diào)整 $('#blur-div').css("width", canvasWidth + "px"); $('#blur-div').css("height", canvasHeight + "px"); $('#blur-image').css("width", image.width + "px"); $('#blur-image').css("height", image.height + "px"); initCanvas();}function initCanvas() { //重置剪輯區(qū)域，歸位,隨機(jī) clippingRegion = { //保證剪輯區(qū)域一定在有圖像的地方 x: Math.random() * (canvas.width - 2 * radius) + radius, //30-320 0-width 減掉半徑30 350-30*2 y: Math.random() * (canvas.height - 2 * radius) + radius, //30-190 0-height 減掉半徑30 220-30*2 r: radius }; draw(image, clippingRegion);}//設(shè)置剪輯區(qū)域function setClippingRegion(clippingRegion) { context.beginPath(); //創(chuàng)建路徑 context.arc(clippingRegion.x, clippingRegion.y, clippingRegion.r, 0, Math.PI * 2, false); //畫圓形 context.clip();}function draw(image, clippingRegion) { context.clearRect(0, 0, canvas.width, canvas.height); context.save(); //圖像繪制前，確定剪輯區(qū)域 setClippingRegion(clippingRegion); context.drawImage(image, 0, 0); //圖片大于canvas context.restore();}//完全顯示清晰圖像，復(fù)用draw函數(shù)，將剪輯區(qū)域變大function show() { //添加動(dòng)畫,此函數(shù)有缺點(diǎn) clippingRegion.r=radius;//給半徑歸位 var theAnimation = setInterval(function() { console.log("anima"); clippingRegion.r += 20; //慢慢擴(kuò)大顯示 //邊界條件 if (clippingRegion.r > 2 * Math.max(canvas.width, canvas.height)) { //停止動(dòng)畫，否則函數(shù)執(zhí)行不停止1000 clearInterval(theAnimation); } draw(image, clippingRegion); }, 30);}//重置，initCanvasfunction reset() { initCanvas();}以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
