摘要：一種類似刮刮獎(jiǎng)的洗車游戲。我的思路如下在一中隨機(jī)放入一些信息如謝謝惠顧，中獎(jiǎng)了，然后用畫布遮蓋此。通過刮掉畫布上的顏色層，下面的信息就顯示出來了。其中前兩個(gè)參數(shù)分別為獲取像素區(qū)域的左上角坐標(biāo)。后兩個(gè)參數(shù)為像素區(qū)域的高和寬。

公司要上活動(dòng)。一種類似刮刮獎(jiǎng)的洗車游戲。網(wǎng)上查找了一些代碼和思路，自己也來模仿一個(gè)。我的思路如下：

在一div中隨機(jī)放入一些信息（如：謝謝惠顧，中獎(jiǎng)了），然后用canvas畫布遮蓋此div。通過刮掉畫布上的顏色層，下面的信息就顯示出來了。

一些css樣式：

*{
            padding: 0;
            margin: 0;
        }
        .canvas-box{
            width: 300px;
            height: 400px;
            margin: auto;
            border: 1px dashed deeppink;
            margin-top: 20px;
            font-size: 50px;
            text-align: center;
            line-height: 400px;
            position: relative;
        }
        #canvas{
            position: absolute;
            left: 0;
            top: 0;
        }

dom結(jié)構(gòu)：

    您的的瀏覽器太尼瑪舊了，請更換或升級(jí)瀏覽器！

js代碼：

 var canvas=document.getElementById("canvas");
            var canvasBox=document.getElementsByClassName("canvas-box")[0];

            var finger;//觸摸屏幕手指
            var whiteZone=0;//刮掉的區(qū)域

            var pen=canvas.getContext("2d");

            var textArr=["謝謝惠顧！","謝謝惠顧！","謝謝惠顧！","謝謝惠顧！","謝謝惠顧！","恭喜中獎(jiǎng)！","恭喜中獎(jiǎng)！","恭喜中獎(jiǎng)！","恭喜中獎(jiǎng)！","恭喜中獎(jiǎng)！"];

            var W=canvas.offsetWidth;
            var H=canvas.offsetHeight;

            var dataList;

            canvasBox.appendChild(document.createTextNode(textArr[Math.floor(Math.random()*10)]));

            // 這里一定要閉合路徑，防止相互影響
            pen.beginPath();
            pen.fillStyle="#ccc";
            pen.fillRect(0,0,500,500);
            pen.closePath();



            //規(guī)定元素相互重疊時(shí)如何表現(xiàn)   當(dāng)前為重疊部分透明
            pen.globalCompositeOperation="destination-out";

            // 給canvas添加事件，手指移動(dòng)時(shí)獲得手指位置，以此位置不斷畫圓
             canvas.addEventListener("touchmove",function(e){
            //e.touches為手指列表，[0]為第一個(gè)

                 finger= e.touches[0];

                 pen.beginPath();
                 pen.arc(finger.pageX,finger.pageY,15,0,Math.PI*2);

                 pen.fill();
                 pen.closePath();
             })

            //手指放開的時(shí)候去計(jì)算掛掉的區(qū)域占總區(qū)域的百分比。大于70%提示ok
            //getImageData方法獲取像素點(diǎn)。其中前兩個(gè)參數(shù)分別為獲取像素區(qū)域的左上角X Y坐標(biāo)。后兩個(gè)參數(shù)為像素區(qū)域的高和寬。
            //遍歷每個(gè)像素點(diǎn)，值為0則是刮掉的像素點(diǎn)
            canvas.addEventListener("touchend",function(){
                    dataList= pen.getImageData(0,0,300,400);
                    for(var i=0;i=dataList.data.length*0.7){
                    alert("ok!!")
                }
            },false)

這里有個(gè)小bug就是可以通過查看元素就能看到最終結(jié)果。當(dāng)然這只是提供一個(gè)思路了。所以有什么更好的方法大家可以告訴我。