摘要:一种类似刮刮奖的洗车游戏。我的思路如下在一中随机放入一些信息如谢谢惠顾,中奖了,然后用画布遮盖此。通过刮掉画布上的颜色层,下面的信息就显示出来了。其中前两个参数分别为获取像素区域的左上角坐标。后两个参数为像素区域的高和宽。
公司要上活动。一种类似刮刮奖的洗车游戏。网上查找了一些代码和思路,自己也来模仿一个。我的思路如下:
在一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结构:
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*0.7){ alert("ok!!") } },false)
这里有个小bug就是可以通过查看元素就能看到最终结果。当然这只是提供一个思路了。所以有什么更好的方法大家可以告诉我。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/85679.html
阅读 3155·2021-11-02 14:44
阅读 3692·2021-09-02 15:41
阅读 1605·2019-08-29 16:57
阅读 1757·2019-08-26 13:38
阅读 3264·2019-08-23 18:13
阅读 2071·2019-08-23 15:41
阅读 1640·2019-08-23 14:24
阅读 2998·2019-08-23 14:03