资讯专栏INFORMATION COLUMN

基于canvas的刮刮奖

LuDongWei / 1485人阅读

摘要:一种类似刮刮奖的洗车游戏。我的思路如下在一中随机放入一些信息如谢谢惠顾,中奖了,然后用画布遮盖此。通过刮掉画布上的颜色层,下面的信息就显示出来了。其中前两个参数分别为获取像素区域的左上角坐标。后两个参数为像素区域的高和宽。

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

在一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

相关文章

发表评论

0条评论

LuDongWei

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<