1、原理：先创建一张img图片，用filter滤镜制作毛玻璃效果。
2、利用绝对定位，使canvas刚好盖在img上面。
3、利用canvas原生clip函数剪辑一个圆形。
地址：http://sandbox.runjs.cn/show/c3mlltak
源代码：
<!DOCTYPE html> <html lang="en"> <head> <!--Designer:[han.jackson] Developer:[zengxiangliang] date:20160412--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta name="keywords" content="keywords"/> <meta name="description" content="description"/> <meta name="robots" content="all"/> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/> <meta name="format-detection" content="telephone=no"/> <meta name="format-detection" content="email=no"/> <style> *{ margin: 0; padding: 0; } html,body,.container,.bgimg{ width:100%; height:100%; } .container{ position: relative; } .bgimg{ position: absolute; top:0; left:0; -webkit-filter: blur(15px); -moz-filter: blur(15px); } #canvas{ position: absolute; top:0; left:0; } .button{ position: absolute; bottom:10%; border-radius: 5px; font-size:20px; padding:5px 10px; text-decoration: none; color:#fff; } .reset{ left:20%; background-color: #07C4EC; } .show{ right:20%; background-color: #EC9807; } </style> </head> <body> <div class="container"> <img class="bgimg" src="images/p43.jpg" alt=""/> <canvas id="canvas">您的浏览器不支持canvas</canvas> <a class="button reset" href="javascript:;">reset</a> <a class="button show" href="javascript:;">show</a> </div> <script> ; (function () { window.addEventListener('load', winEventLoad, false); window.addEventListener('resize', canvasApp, false); function winEventLoad() { canvasApp(); } function canvasApp(){ if(!!!document.getElementById('canvas').getContext('2d')){return} var myCanvas = document.getElementById('canvas'); var ctx = myCanvas.getContext('2d'); var ww = document.documentElement.clientWidth; var wh = document.documentElement.clientHeight; var radius = 40; var t; var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame; myCanvas.width = ww; myCanvas.height = wh; var options = { x:Math.random()*(canvas.width-radius*2)+radius, y:Math.random()*(canvas.height-radius*2)+radius, r:radius }; var img = new Image(); img.src = 'images/p43.jpg'; img.onload = function () { initCanvas(); }; function setClippingRegion(options){ ctx.beginPath(); ctx.arc(options.x, options.y, options.r, 0, Math.PI * 2, false); ctx.closePath(); ctx.clip(); } function draw(options) { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.save(); setClippingRegion(options); ctx.drawImage(img,0,0,canvas.width, canvas.height); ctx.restore(); } function initCanvas(){ draw(options); } function show(){ var diagonal = Math.max(canvas.width,canvas.height)*2; (function showloop(){ options.r += 20; t = requestAnimationFrame(showloop); if(options.r>diagonal){ cancelAnimationFrame(t); } draw(options); }()); } function reset(){ cancelAnimationFrame(t); options = { x:Math.random()*(canvas.width-radius*2)+radius, y:Math.random()*(canvas.height-radius*2)+radius, r:radius }; options.r = 0; (function resetloop(){ options.r += 2; var t = requestAnimationFrame(resetloop); if(options.r >= radius){ cancelAnimationFrame(t); } draw(options); })(); } document.querySelector('.show').addEventListener('click',show,false); document.querySelector('.reset').addEventListener('click',reset,false); } }()) </script> </body> </html>