公司要上运动。一种相似刮刮奖的洗车游戏。网上查找了一些代码和思绪，本身也来模拟一个。我的思绪以下：

在一div中随机放入一些信息（如：感谢光顾，中奖了），然后用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构造：

<div class="canvas-box">
    <canvas id="canvas"  width="300" height="400">您的的浏览器太尼玛旧了，请替换或晋级浏览器！</canvas>
</div>

js代码：

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

            var finger;//触摸屏幕手指
            var whiteZone=0;//刮掉的地区

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

            var textArr=['感谢光顾！','感谢光顾！','感谢光顾！','感谢光顾！','感谢光顾！',"祝贺中奖！","祝贺中奖！","祝贺中奖！","祝贺中奖！","祝贺中奖！"];

            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();



            //划定元素互相堆叠时怎样表现   当前为堆叠部份通明
            pen.globalCompositeOperation="destination-out";

            // 给canvas增加事宜，手指挪动时取得手指位置，以此位置不停画圆
             canvas.addEventListener("touchmove",function(e){
            //e.touches为手指列表，[0]为第一个

                 finger= e.touches[0];

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

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

            //手指摊开的时刻去盘算挂掉的地区占总地区的百分比。大于70%提醒ok
            //getImageData要领猎取像素点。个中前两个参数分别为猎取像素地区的左上角X Y坐标。后两个参数为像素地区的高和宽。
            //遍历每一个像素点，值为0则是刮掉的像素点
            canvas.addEventListener("touchend",function(){
                    dataList= pen.getImageData(0,0,300,400);
                    for(var i=0;i<dataList.data.length;i++){
                        if(dataList.data[i]==0){
                            whiteZone++;
                        }
                    }

                if(whiteZone>=dataList.data.length*0.7){
                    alert("ok!!")
                }
            },false)

这里有个小bug就是能够经由过程检察元素就可以看到终究效果。固然这只是供应一个思绪了。所以有什么更好的要领人人能够告诉我。