Canvas 刮刮卡

利用canvas实现刮刮卡效果

步骤大概分为4点：

• 现在奖项上方绘制一个遮罩效果，可以用纯色或者图片
• 然后监听触碰事件，然后设置画笔的样式，并利用globalCompositeOperation 来设置新画笔在老画布上的重叠部分效果
• 然后绘制线段
• 判断绘制区域大小，当大于整个画布3/4的时候，遮罩消失

这个里面只有2点比较重要,一个是globalCompositeOperation ，然后就是判断当前线段绘制的面积

getImageData:复制画布上指定矩形的像素数据，每个像素的数据是通过rgba来展示的,其中a代表透明度，当这个值为0的时候，这个像素点就是透明的

var imageData = context.getImageData(0,0,canvas.width,canvas.height);
            var allPx = imageData.width * imageData.height;
            var visibleNum = 0; // 刮开的像素点个数
            for(var i = 0; i < allPx; i++){
                if(imageData.data[i*4 + 3] == 0){  
                    // imageData.data 里面是Uint8ClampedArray类型的一维数组 
                    // imageData中的每个像素，都是由rgba的值组成的
                    // 其中a的值代表透明度 范围0-255 0为透明 255为完全不透明
                    // https://www.w3schools.com/tags/canvas_getimagedata.asp 这里有详细的解释
                    visibleNum++;
                }
            }
            if(visibleNum >= allPx*3/4){ // 大于3/4 图层隐藏
                canvas.setAttribute('class','disappear');
            }

演示
imageData