使用原生js作刮一刮功能

時間 2019-12-04

原文原文鏈接

該效果可應用於刮一刮，塗抹圖層等地方，使用canvas的globalCompositeOperation屬性的destination-out值，根據手指移動畫線，使之變透明，代碼以下：
html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>刮一刮</title>
        <style>
            p{font-size: 30px;line-height: 60px;}
            #mycanvas{position: absolute;top: 0;left: 0;}
        </style>
        <!--<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>-->
    </head>
    <body>
        <p>哇，你看到我了嗎？</p>
        <p>哇，你看到我了嗎？</p>
        <p>哇，你看到我了嗎？</p>
        <p>哇，你看到我了嗎？</p>
        <p>哇，你看到我了嗎？</p>
        <p>哇，你看到我了嗎？</p>
        <canvas id="mycanvas"></canvas>

        <script>
            //可視區域的寬高
        var width = document.documentElement.clientWidth
        var height = document.documentElement.clientHeight;
        console.log(width,height);
        var boxTop = 0;//canvas的top值
        var boxLeft = 0;//canvas的left值
        console.log(boxTop)
        var device = /android|iphone|ipad|ipod|webos|iemobile|opear mini|linux/i.test(navigator.userAgent.toLowerCase());
        var startEvtName = device ? "touchstart" : "mousedown";
        var moveEvtName = device ? "touchmove" : "mousemove";
        var endEvtName = device ? "touchend" : "mouseup";

        var canvas=document.getElementById("mycanvas");
        //定義畫布的大小
        canvas.height = height;
        canvas.width = width;
        can=canvas.getContext("2d");

        //進行畫布的圖片
//      var oImg = new Image();
//      oImg.src = "img/p702.png";
//      oImg.onload = function () {
//          can.beginPath();
//          can.drawImage(oImg, 0, 0, width, height);
//          can.closePath();
//      }
            can.fillStyle="#000";
            can.fillRect(0,0,width,height);
         /* 根據手指移動畫線，使之變透明*/
        function draw(event) {
            var x = device ? event.touches[0].clientX : event.clientX;
            var y = device ? event.touches[0].clientY : event.clientY;
            console.log(x,y);

            can.beginPath();
            can.globalCompositeOperation = "destination-out";
            can.arc(x-boxLeft, y-boxTop, 40, 0, Math.PI * 2, false);
            can.fill();
            can.closePath();
        }
        /* 增長觸摸監聽*/
        //true  捕獲 false  冒泡
        canvas.addEventListener(startEvtName, function () {
            console.log("touch1");

            canvas.addEventListener(moveEvtName, draw, false);
        }, false);

        canvas.addEventListener(endEvtName, function () {
            console.log("touch2");
            canvas.removeEventListener(moveEvtName, draw, false);
        }, false);
        document.addEventListener(endEvtName, function () {
            /* 獲取imageData對象*/
            var imageDate = can.getImageData(0, 0, canvas.width, canvas.height);
            /* */
            var allPX = imageDate.width * imageDate.height;

            var iNum = 0;//記錄刮開的像素點個數

            for (var i = 0; i < allPX; i++) {
                if (imageDate.data[i * 4 + 3] == 0) {
                    iNum++;
                }
            }
            if (iNum >= allPX * 1 / 3 ) {
                canvas.style.display = "none";
                alert("擦乾淨了");
            }
        }, false);
        </script>
    </body>
</html>
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。