canvas玩转微信红包
CSS3相关属性：
<!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>
（最后效果如上：）
