<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=640,user-scalable=no,target-densitydpi=device-dpi" />
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="format-detection" content="telephone=no"/>
<title>朋友圈照片红包效果</title>
<style>
*{
margin:0;
padding:0;
}
.pic{
width: 854px;
height: 569px;
position: relative;
margin: 0 auto;
}
.img{
filter: blur(30px);
-webkit-filter: blur(30px);
position: absolute;
top: 0;
left:0;
width: 854px;
height: 569px;
z-index:2;
}
#canvas{
position: absolute;
top:0;
left:0;
z-index:3;
}
.pic-btn{
position: absolute;
bottom: -106px;
left:0;
width:100%;
z-index:4;
}
.pic-btn .btn{
width:120px;
height:50px;
text-align: center;
overflow: hidden;
font-size:30px;
color:#fff;
border:none;
border-radius: 4px;
}
#reset{
background:#5ED9EF;
float: left;
}
#over{
background:#A6E22E;
float: right;
}
</style>
</head>
<body>
<div class="pic">
<img src="1.jpg" class="img" alt="">
<canvas id="canvas"></canvas>
<div class="pic-btn">
<button class="btn" id="reset">重置</button>
<button class="btn" id="over">红包</button>
</div>
</div>
</body>
<script>
!(function(win,undefined){
var Mycanvas=document.getElementById("canvas"),
reset=document.getElementById("reset"),
over=document.getElementById("over"),
cont=Mycanvas.getContext("2d"),
img=new Image(),
radius=50,
move=null,
clipReging={x:300,y:200,r:radius};
img.src="1.jpg";
Mycanvas.width=854;
Mycanvas.height=569;
img.οnlοad=function(){
draw(this,clipReging);
}
/**
* *画一个图片剪裁
* @param {[type]} img [description]
* @param {[type]} clipReging [description]
* @return {[type]} [description]
*/
function draw(img,clipReging){
cont.clearRect(0,0,Mycanvas.width,Mycanvas.height);
cont.save();
clipImg(clipReging);
cont.drawImage(img,0,0);
cont.restore();
}
/**
* *剪裁一个圆形
* @param {[type]} clipReging [description]
* @return {[type]} [description]
*/
function clipImg(clipReging){
cont.beginPath();
cont.arc(clipReging.x,clipReging.y,clipReging.r,0,Math.PI*2,false);
cont.clip();
cont.closePath();
}
/**
* 位置随机出来
* @return {[type]} [description]
*/
reset.οnclick=function(){
clipReging={x:radius+(Math.random()*(Mycanvas.width-radius*2)),y:radius+(Math.random()*(Mycanvas.height-radius*2)),r:radius};
draw(img,clipReging);
}
/**
* *给了红包以后
* @return {[type]} [description]
*/
over.οnclick=function(){
show();
}
/**
* *全部显示照片
* @return {[type]} [description]
*/
function show(){
clipReging.r+=10;
if(clipReging.r>2*Math.max(Mycanvas.width,Mycanvas.height)){
cancelAnimationFrame(move);
}else{
move=requestAnimationFrame(show);
draw(img,clipReging);
}
}
})(window)
</script>
</html>