微信朋友圈红包照片实现

来源：互联网发布：太极线软件下载编辑：程序博客网时间：2024/04/29 12:06
demo
<!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.onload=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.onclick=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.onclick=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>
0 0