微信刮刮乐

微信刮刮乐 其他样式不贴 只贴核心代码：

<div class="m-box">
                        <div class="cyc-box" style="z-index: 8;">
                            <canvas id="" width="100%" height="100%" style="z-index: 8888;"></canvas>
                        </div>
                        <div class="cyc-box g-center" style="z-index: 7; font-size: 0.6rem;">
                                              谢谢参与<sub>(再来一次)</sub>
                        </div>
                    </div>

**js:**

 var bodyStyle = document.body.style;

        bodyStyle.mozUserSelect = 'none';
        bodyStyle.webkitUserSelect = 'none';

        var canvas = document.querySelector('canvas');
        canvas.style.backgroundColor='transparent';
        canvas.style.position = 'absolute';

        var ctx;
        var w = $(".cyc-box").width();
        var h = $(".cyc-box").height();
        /*var w = 520, h = 320;*/
        var offsetX, offsetY, x, y;
        var mousedown = false;

        function draw(){
            canvas.width=w;
            canvas.height=h;
            canvas.style.backgroundColor='rgba(0,0,0,0)';
            ctx=canvas.getContext('2d');
            ctx.fillStyle='transparent';
            ctx.fillRect(0, 0, w, h);
            layer(ctx);

            ctx.globalCompositeOperation = 'destination-out';
            ctx.lineWidth = 50;
            ctx.lineCap = "round";
        }
        draw();
        canvas.addEventListener('touchstart', eventDown);
        canvas.addEventListener('touchend', eventUp);
        canvas.addEventListener('touchmove', eventMove);
        canvas.addEventListener('mousedown', eventDown);
        canvas.addEventListener('mouseup', eventUp);
        canvas.addEventListener('mousemove', eventMove);
        /**
         * 重新绘制
         */
        function layer(ctx) {
            ctx.fillStyle = 'gray';
            ctx.fillRect(0, 0, w, h) ;
        }

        /**
         * 鼠标按下
         */
        function eventDown(e){
            e.preventDefault();
            if(e.changedTouches){
                e=e.changedTouches[0];
            }
            offsetX = $("canvas").offset().left;
            offsetY = $("canvas").offset().top;
            mousedown=true;
            console.log(offsetY);
        }

        /**
         * 鼠标弹起
         */
        function eventUp(e){
            e.preventDefault();
            mousedown=false;
            var bfb = getTransparentPercent();
            if(bfb>60){
                alert(11);
                finish();
            }
        }

        /**
         * 鼠标移动
         */
        function eventMove(e){
            e.preventDefault();
            if(mousedown) {
                if(e.changedTouches){
                    e=e.changedTouches[0];
                }

                with(ctx) {
                    ctx.beginPath();
                    ctx.moveTo(x, y);
                    x = e.pageX - offsetX;
                    y = e.pageY - offsetY;
                    ctx.lineTo(x, y);
                    ctx.stroke();
                }
            }
        }

        /**
         * 计算刮的面积
         * @returns {string}
         */
        function getTransparentPercent(){
            var imgData = ctx.getImageData(0, 0, w, h),
                    pixles = imgData.data,
                    transPixs = [];
            for (var i = 0, j = pixles.length; i < j; i += 4) {
                var a = pixles[i + 3];
                if (a < 128) {
                    transPixs.push(i);
                }
            }
            return (transPixs.length / (pixles.length / 4) * 100).toFixed(2);
        }