今天跟著學習了一個制作紅包照片類似功能的demo，很有意思，所以在這里分享代碼給大家，可以直接使用。
先貼出效果圖大家看一下：
點擊重置后會以隨機一個點為圓心生成半徑為50px的圓，然后顯示清晰的圖像；
點擊顯示后會全部顯示清晰的圖像；
功能雖然很少，但是很有意思不是嗎，而且做好了適配可以在不同分辨率大小的設備上都可以玩。
只需要js+css+html就可以實現，不過需要引入jquery
下面po出完整代碼：
demo.html:
<!DOCTYPE HTML><html><head lang="en"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Canvas玩兒轉紅包照片</title><script src="http://cdn.bootcss.com/jquery/2.2.0/jquery.min.js" type="text/javascript"></script><link href="img.css" rel="external nofollow" rel="stylesheet" type="text/css" /><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"/> </head> <body> <div id="blur-div"> <img src="images/1.jpg" id="blur-image"> <canvas id="canvas"> </canvas> <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="img.js"></script></body></html>
img.css:
*{ margin: 0 0; padding: 0 0;} #blur-div{/* width: 800px; height: 500px;*/ margin: 0 auto; position: relative; /*超過部分隱藏*/ overflow: hidden;} #blur-image { display: block; /*width: 800px; height: 500px;*/ 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軸上的值*/ z-index: 0;} #canvas{ display: block; margin: 0 auto; position: absolute; left: 0px; top: 0px; z-index: 100; } .button{ display: block; position: absolute; z-index: 200; width: 100px; height: 30px; color: white; text-decoration: none; text-align: center; line-height: 30px; border-radius: 5px; } #reset-button{ left: 50px; bottom: 20px; background-color: #058;} #reset-button:hover{ background-color: #047;} #show-button{ right: 50px; bottom: 20px; background-color: #085;} #show-button:hover{ background-color: #074;}img.js:
var canvasWidth = window.innerWidthvar canvasHeight = window.innerHeight var canvas = document.getElementById("canvas")var context = canvas.getContext("2d") canvas.width=canvasWidthcanvas.height=canvasHeightvar radius = 50 var image = new Image()var clippingRegion = {x:-1,y:-1,r:radius} var leftMargin = 0, topMargin=0 var a; image.src = "images/1.jpg"image.onload = function(e){ $("#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") leftMargin = (image.width - canvas.width) / 2 topMargin = (image.height - canvas.height) / 2 $("#blur-image").css("top", "-" + topMargin + "px") $("#blur-image").css("left", "-" + leftMargin + "px") initCanvas()} function initCanvas(){ clearInterval(a) clippingRegion = {x:Math.random()*(canvas.width-2*radius)+radius,y:Math.random()*(canvas.height-2*radius)+radius,r:radius} console.log(canvas.width); console.log(canvas.height); clippingRegion.r = 0; var id = setInterval( function(){ clippingRegion.r += 2; if(clippingRegion.r > 50){ clearInterval(id) } draw(image,clippingRegion) }, 30 ) } function setClippingRegion(clippingRegion){ /*創建剪輯區域的路徑*/ context.beginPath() /*第六個參數表示是順時針還是逆時針繪制*/ context.arc(clippingRegion.x, clippingRegion.y, clippingRegion.r, 0, Math.PI*2, false) /*希望路徑是個剪輯區域調用此方法*/ context.clip()} function draw(image ,clippingRegion){ /*每次繪制之前，對canvas的內容進行清空*/ context.clearRect(0,0,canvas.width,canvas.height) /*存儲canvas的當前狀態*/ context.save() /*剪輯出一個圓形的區域*/ setClippingRegion(clippingRegion) /*開始畫*/ //context.drawImage(image, 0 , 0) /*leftMargin, topMargin, canvas.width, canvas.height表示image剪出這么大 0, 0, canvas.width, canvas.height 表示canvas的大小 */ context.drawImage(image, leftMargin, topMargin, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height) /*canvas的狀態恢復*/ context.restore()} function reset(){ initCanvas();} function show(){ /*此函數是內置函數，表示每隔多少秒就執行前面的函數 所以第一個參數是函數，后面是間隔時間*/ var id = setInterval( function(){ a = id; clippingRegion.r += 20 if(clippingRegion.r > 2*Math.max(canvas.width,canvas.height)){ /*用來關閉函數執行的*/ clearInterval(id); } draw(image ,clippingRegion) }, 30 )} /*阻止滑動操作*//*canvas.addEventListener("touchstart",function(e){ e.preventDefault()});*/以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
