微信刮刮乐

来源：互联网发布：淘宝宝贝图片宽度编辑：程序博客网时间：2024/05/20 10:21
微信刮刮乐其他样式不贴只贴核心代码：
<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);        }
0 0