码迷,mamicode.com
首页 > 微信 > 详细

canvas模仿微信抢红包功能

时间:2016-06-20 14:06:35      阅读:329      评论:0      收藏:0      [点我收藏+]

标签:

1、原理:先创建一张img图片,用filter滤镜制作毛玻璃效果。

2、利用绝对定位,使canvas刚好盖在img上面。

3、利用canvas原生clip函数剪辑一个圆形。

地址:http://sandbox.runjs.cn/show/c3mlltak

源代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <!--Designer:[han.jackson] Developer:[zengxiangliang] date:20160412-->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta name="keywords" content="keywords"/>
    <meta name="description" content="description"/>
    <meta name="robots" content="all"/>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="email=no"/>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body,.container,.bgimg{
            width:100%;
            height:100%;
        }
        .container{
            position: relative;
        }
        .bgimg{
            position: absolute;
            top:0;
            left:0;
            -webkit-filter: blur(15px);
            -moz-filter: blur(15px);
        }
        #canvas{
            position: absolute;
            top:0;
            left:0;
        }
        .button{
            position: absolute;
            bottom:10%;
            border-radius: 5px;
            font-size:20px;
            padding:5px 10px;
            text-decoration: none;
            color:#fff;
        }
        .reset{
            left:20%;
            background-color: #07C4EC;
        }
        .show{
            right:20%;
            background-color: #EC9807;
        }
    </style>
</head>
<body>
    <div class="container">
        <img class="bgimg" src="images/p43.jpg" alt=""/>
        <canvas id="canvas">您的浏览器不支持canvas</canvas>
        <a class="button reset" href="javascript:;">reset</a>
        <a class="button show" href="javascript:;">show</a>
    </div>
    <script>
        ;
        (function () {
            window.addEventListener(load, winEventLoad, false);
            window.addEventListener(resize, canvasApp, false);
            function winEventLoad() {
                canvasApp();
            }
            function canvasApp(){
                if(!!!document.getElementById(canvas).getContext(2d)){return}
                var myCanvas = document.getElementById(canvas);
                var ctx = myCanvas.getContext(2d);
                var ww = document.documentElement.clientWidth;
                var wh = document.documentElement.clientHeight;
                var radius = 40;

                var t;
                var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                        window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

                var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;

                myCanvas.width = ww;
                myCanvas.height = wh;

                var options = {
                    x:Math.random()*(canvas.width-radius*2)+radius,
                    y:Math.random()*(canvas.height-radius*2)+radius,
                    r:radius
                };

                var img = new Image();
                img.src = images/p43.jpg;
                img.onload = function () {
                    initCanvas();
                };
                function setClippingRegion(options){
                    ctx.beginPath();
                    ctx.arc(options.x, options.y, options.r, 0, Math.PI * 2, false);
                    ctx.closePath();
                    ctx.clip();
                }
                function draw(options) {
                    ctx.clearRect(0, 0, canvas.width, canvas.height);

                    ctx.save();
                    setClippingRegion(options);
                    ctx.drawImage(img,0,0,canvas.width, canvas.height);
                    ctx.restore();
                }
                function initCanvas(){
                    draw(options);
                }
                function show(){
                    var diagonal = Math.max(canvas.width,canvas.height)*2;
                    (function showloop(){
                        options.r += 20;
                        t = requestAnimationFrame(showloop);
                        if(options.r>diagonal){
                            cancelAnimationFrame(t);
                        }
                        draw(options);
                    }());
                }
                function reset(){
                    cancelAnimationFrame(t);
                    options = {
                        x:Math.random()*(canvas.width-radius*2)+radius,
                        y:Math.random()*(canvas.height-radius*2)+radius,
                        r:radius
                    };
                    options.r = 0;
                    (function resetloop(){
                        options.r += 2;
                        var t = requestAnimationFrame(resetloop);
                        if(options.r >= radius){
                            cancelAnimationFrame(t);
                        }
                        draw(options);
                    })();
                }
                document.querySelector(.show).addEventListener(click,show,false);
                document.querySelector(.reset).addEventListener(click,reset,false);
            }
        }())
    </script>
</body>
</html>

 

canvas模仿微信抢红包功能

标签:

原文地址:http://www.cnblogs.com/qianduanjingying/p/5600299.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!