利用canvas实现刮刮乐效果

最近做了个情人节表白的项目，表白内容时被遮盖的，刮开后才能显示，并且刮开一定比例后清空所有遮罩。
　　function guaguale(obj,w,h){//obj时canvas元素
        var canva2D=obj.getContext("2d");
        var src = "cover.png";//设置遮罩图片
        var img = new Image();
        img.src=src;
        img.onload = function() {//图片加载完成后渲染
            canva2D.drawImage(img, 0, 0, w, h);
        }
        function lottery(x,y,c){//清除以(x,y)为中心的四周边长20px的正方形的遮罩，c时canvas对象
            c.clearRect(x-10,y-10,20,20);
        }
        obj.addEventListener('touchmove',function(event){
            if(event.targetTouches.length == 1){//一个手指才能刮
                event.preventDefault();// 阻止浏览器默认事件，重要
                var touch = event.targetTouches[0];
                var canavOffest = $(obj).offset();//获取元素到屏幕两边的距离
                var canvX=Math.floor(touch.pageX - canavOffest.left);//手指到canvas元素左边的距离
                var canvY=Math.floor(touch.pageY-canavOffest.top);   //手指到canvas元素上边的距离
                lottery(canvX,canvY,canva2D);
            }
        },false);
        obj.addEventListener('touchend',function(event){//每次手指离开canvas时计算刮开的比例
            event.preventDefault();// 阻止浏览器默认事件，重要
            var data = canva2D.getImageData(0, 0, w, h).data,//获取整个canvas的元素点
                    scrapeNum = 0,area = w * h;
            for(var i = 3, len = data.length; i < len; i += 4){
                if(data[i] === 0){
                    scrapeNum ++;
                }
            }
            if(scrapeNum > area * 0.5){//达到一定比例后清除所有
                canva2D.clearRect(0, 0, w, h);
            }
        },false);

    }
最简单的文字及代码解答复杂的功能，不做多余的文字，如有疑问之处，请留言互相交流学习，本人也在爬坑中。

 

转载于:https://www.cnblogs.com/tkpn/p/6525509.html