canvas 繪製透明圓點刮除灰色塗層，桌機有效、手機卻無效

canvas css js html5

愛的code 2022-07-08 08:58:34 ‧ 823 瀏覽

分享至

想請教一下前輩！
我有刮刮卡練習 html如下，重點在於：
1、若我採取如下eventMove(e)事件時，刮除的點與滑鼠觸發的點對不上。

            function eventMove(e){
                e.preventDefault();
                if(mousedown) {
                    if(e.changedTouches){
                        e=e.changedTouches[e.changedTouches.length-1];
                    }

                    var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0,
                    y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;
                    with(ctx) {
                        beginPath()
                        arc(x, y, 20, 0, Math.PI * 2);//绘制圆点           
                        fill();
                    }
                    handlePercentage(getFilledInPixels(32));
                }
            }

因此，我換成這樣：

  //  arc(x, y, 20, 0, Math.PI * 2);//绘制圆点  //註掉這一行 改成下一行
  arc(e.offsetX,e.offsetY,20,0,Math.PI*2);

這樣時，我的觸發點與刮除點可以match 上，但卻帶來另一個問題：
2、使用桌機滑鼠刮除灰色塗層OK，但使用手機時，無法執行刮除動作，(有測試過，沒改之前是可以執行的)。

請教前輩們！這能有解方嗎？
附上完整程式碼以及所需圖片如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>刮刮卡練習</title>
</head>
<body>
    <canvas id="prize_canvas" width="800px" height="600px"></canvas>
    <canvas id="gray_canvas" width="800px" height="600px"></canvas>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script>
        $("#prize_canvas").css('background', 'url("image/0011.png") no-repeat')
        var bodyStyle = document.body.style;
        bodyStyle.mozUserSelect = 'none';
        bodyStyle.webkitUserSelect = 'none';

        var img = new Image();
        var canvas = document.querySelector('#gray_canvas');
        var canvas1 = document.querySelector('#prize_canvas');
        canvas.style.backgroundColor='transparent';
        canvas.style.position = 'absolute';
        canvas1.style.position = 'absolute';

        var imgs = ['image/pointer.png','image/turntable.png'];
        var num = Math.floor(Math.random()*2);
        img.src = imgs[num];
        img.width = 500;
        img.height = 300;

        console.log(num);
        img.addEventListener('load', function(e) {

            var ctx;
            var w = img.width;
            var h = img.height;

            var offsetX = canvas.offsetLeft,
            offsetY = canvas.offsetTop;
            var mousedown = false;

            function layer(ctx) {
                ctx.fillStyle = 'gray';
                ctx.fillRect(0, 0, w, h);
            }

            function eventDown(e){
                e.preventDefault();
                mousedown=true;
            }

            function eventUp(e){
                e.preventDefault();
                mousedown=false;
            }

            function eventMove(e){
                e.preventDefault();
                if(mousedown) {
                    if(e.changedTouches){
                        e=e.changedTouches[e.changedTouches.length-1];
                    }

                    var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0,
                    y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;
                    with(ctx) {
                        beginPath()
                        arc(x, y, 20, 0, Math.PI * 2);//绘制圆点                        
                        // arc(e.offsetX,e.offsetY,20,0,Math.PI*2);
                        fill();
                    }
                    handlePercentage(getFilledInPixels(32));
                }
            }

            canvas.width=w;
            canvas.height=h;
            canvas.style.backgroundImage='url(' + img.src + ')';
            ctx=canvas.getContext('2d');
            ctx.fillStyle='transparent';
            ctx.fillRect(0, 0, w, h);//绘制矩形
            layer(ctx);
            ctx.globalCompositeOperation = 'destination-out';
            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 getFilledInPixels(stride) {
                if (!stride || stride < 1) { stride = 1; }
                
                var pixels   = ctx.getImageData(0, 0, w, h),
                    pdata    = pixels.data,
                    l        = pdata.length,
                    total    = (l / stride),
                    count    = 0;
                
                for(var i = count = 0; i < l; i += stride) {
                    if (parseInt(pdata[i]) === 0) {
                        count++;
                    }
                }
                return Math.round((count / total) * 100);
            }
  
            function handlePercentage(filledInPixels) {
                filledInPixels = filledInPixels || 0;
                console.log(filledInPixels + '%');
                if (filledInPixels > 30) {
                    canvas.parentNode.removeChild(canvas);
                }
            }
        });
    </script>
</body>
</html>