Canvas圖片模糊效果（學習筆記）
阿新 • • 發佈：2019-01-22
Canvas圖片模糊效果學習視訊：http://www.imooc.com/learn/601
Demo和學習筆記
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas玩兒轉紅包照片</title> <script type="text/javascript" src="js/jquery.js"></script> <link href="css/blur.css" 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/image.jpg" id="blur-image"> <canvas id="canvas"> </canvas> <a href="javascript:reset()" class="button" id="reset-button">RESET</a> <a href="javascript:show()" class="button" id="show-button">SHOW</a> </div> <script type="text/javascript" src="js/blur.js"></script> </body> </html>
blur.css
@CHARSET "UTF-8"; /*取消邊距*/ *{ margin: 0 0; padding:0 0; } #blur-div{ margin: 0 auto; position: relative; overflow:hidden; /*溢位部分隱藏*/ } #blur-image{ display:block; margin: 0 auto; filter:blur(20px); /* css3新屬性：模糊效果 */ -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; } #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; }
blur.js
/** * */ var canvasWidth=window.innerWidth; var canvasHeight=window.innerHeight; //獲取canvas的id值 var canvas=document.getElementById("canvas"); //獲取上下文環境 var context=canvas.getContext("2d"); //設定canvas的長度和寬度 canvas.width=canvasWidth; canvas.height=canvasHeight; var image=new Image(); var radius=50; var clippingRegion={x:-1,y:-1,r:radius}; //剪輯區域 var leftMargin=0,topMargin=0; image.src="images/image.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",String(-topMargin)+"px"); $("#blur-image").css("left",String(-leftMargin)+"px"); initCanvas(); }; function initCanvas(){ var theleft=leftMargin<0?-leftMargin:0; var thetop=topMargin<0?-topMargin:0; clippingRegion={x:Math.random()*(canvas.width-2*radius-2*theleft)+radius+theleft,y:Math.random()*(canvas.height-2*radius-2*thetop)+radius+thetop,r:radius}; //避免邊緣化 draw(image,clippingRegion); } function setClippingRegion(clippingRegion){ context.beginPath(); 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(); //儲存 setClippingRegion(clippingRegion); context.drawImage(image, Math.max(leftMargin,0),Math.max(topMargin,0), Math.min(canvas.width,image.width),Math.min(canvas.height,image.height), leftMargin<0?-leftMargin:0,topMargin<0?-topMargin:0, Math.min(canvas.width,image.width),Math.min(canvas.height,image.height)); context.restore(); //恢復 } function reset(){ clearInterval(theAnimation); initCanvas(); } var theAnimation; function show(){ //新增動畫 theAnimation=setInterval( function(){ //顯示整個清晰的影象 clippingRegion.r+=20; if(clippingRegion.r>2*Math.max(canvas.width,canvas.height)){ clearInterval(theAnimation); //停止動畫 } draw(image,clippingRegion); }, 30 ); } canvas.addEventListener("touchstart",function(e){ e.preventDefault(); });
總結：
在pc端部分，學習內容比較基礎。主要涉及到css3的filter屬性、canvas標籤的基本使用、以及如何通過小技巧形成模糊到清晰的動態效果等。在適配手機端部分，需要考慮canvas尺寸、image尺寸、剪輯尺寸等多個因素對螢幕的影響。