canvas玩转微信红包
CSS3相关属性:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head lang='en'> <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-scale= no' /> <title>canvas玩转微信红包</title> <script src='jquery-1.10.2.min.js' type='text/javascript'></script> <style> *{ padding:0px; margin:0px; } #blur-div{ width: 620px; height: 350px; position: relative; margin: 0 auto; } #blur-image{ width: 620px; height: 350px; display: block; margin: 0 auto; filter: blur(5px); /*grayscale(灰度)/sepia(黄棕色)/saturate(饱和度)/hue-rotate(色相)/invert(反色)/opacity(不透明度)/brightness(明度)/contrast/(对比度)blur(模糊)/drop-shadow(阴影)*/ -webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); -o-filter: blur(5px); 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: 100px; height: 30px; color: white; text-decoration: none; text-align: center; line-height: 30px; border-radius: 5px; } #reset-button{ left: 200px; bottom: 20px; background-color: #085; } #show-button{ left: 400px; bottom: 20px; background-color: #074; } </style> </head> <body> <div id='blur-div'> <img id='blur-image' src='image.jpg'/> <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'> var canvasWidth = 620; //window.innerWidth var canvasHeight = 350; //window.innerHeight var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); canvas.width = canvasWidth; canvas.height = canvasHeight; var image = new Image(); var clippingRegion = {x: -1, y: -1, r: 30}; image.src = 'image.jpg'; image.onload = function(e){ initCanvas(); } function initCanvas(){ clippingRegion = {x: Math.random()*600, y: Math.random()*300, r: 30}; 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,0,0); context.restore(); } function reset(){ initCanvas(); } function show(){ var tip = setInterval(function(){ clippingRegion.r += 20; if(clippingRegion.r> Math.max(canvas.width,canvas.height)){ clearInterval(tip); } draw(image, clippingRegion);console.log('hahah'); },30); } </script> </body> </html>
(最后效果如上:)