canvas模仿微信抢红包功能

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="data: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>