微信朋友圈红包照片实现

最新推荐文章于 2021-06-04 09:09:59 发布

寓言s

最新推荐文章于 2021-06-04 09:09:59 发布

阅读量873

点赞数

分类专栏： javascript javascript canvas

本文链接：https://blog.csdn.net/u011551941/article/details/50732721

版权

javascript 同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

javascript canvas

7 篇文章 0 订阅

订阅专栏

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.ο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>