基于canvas的刮刮奖

基于canvas的刮刮奖

公司要上活动。一种类似刮刮奖的洗车游戏。网上查找了一些代码和思路，自己也来模仿一个。我的思路如下：

在一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&#ElementById("canvas");var canvasBox&#ElementsByClassName("canvas-box")[0];var finger;//触摸屏幕手指var whiteZone=0;//刮掉的区域var pen&#Context("2d");var textArr=['谢谢惠顾！','谢谢惠顾！','谢谢惠顾！','谢谢惠顾！','谢谢惠顾！',"恭喜中奖！","恭喜中奖！","恭喜中奖！","恭喜中奖！","恭喜中奖！"];var W=canvas.offsetWidth;var H=canvas.offsetHeight;var dataList;canvasBox.ateTextNode(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= ImageData(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就是可以通过查看元素就能看到最终结果。当然这只是提供一个思路了。所以有什么更好的方法大家可以告诉我。