现在各大互联网公司都在造节日，什么天猫双十一，京东618...

咱们公司虽然小，也要赶潮流，要搞个418T恤节

主要策划就是设计一个很简单的小游戏，来和用户互动，然后引导用户分享，提升注册数，销售量

核心几点要求就是，游戏不能很复杂，得有意思，开发周期要短，最后就敲定了，做一个刮刮卡类型的小游戏

其实，刮刮卡小游戏，最核心的一行代码，就是

context.globalCompositeOperation = "destination-out"

源图像 = 您打算放置到画布上的绘图

目标图像 = 您已经放置在画布上的绘图

官方解释为，在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的

官方对这个属性的解释很复杂，我简单暴力一点的解释就是

画一个十字，横竖交叉的地方，会显示为透明的，也就是说，相交的地方，会显示为透明的

那么，先在Canvas上，填充一张马赛克图片，然后在Canvas下面，放一张要显示的图片

这时候，图片是被Canvas挡住的。当用户用手在Canvas的马赛克上涂抹的时候，在经过的轨迹上，绘制出较粗的线条

这样，线条和马赛克相交的区域，就会变透明。这样，这个区域下的图片就会显示出来，就实现了刮刮卡一样的效果

当用户手在Canvas上滑动的时候，代码如下

context.beginPath();
context.moveTo(x1, y1);       //设置起始点
context.lineCap = 'round';    //设置线条两端的样式，round设置为圆形
context.lineWidth = width;    
context.lineTo(x, y);
context.stroke();

每当用户手离开屏幕的时候，就检测一下，马赛克被清除的百分比

var oData = context.getImageData(0, 0, canvas.width, canvas.height);
var nNum = 0;
var aArr = [];
//oData.data是一个数组，里面依次存放的是像素点的RGBA值。比如说，Canvas有100个点，那个这个数组的长度就是400
//也就是说，只需要依次判断第4位的值是否为0，就知道这个像素点是否为透明的
for (var i = 3; i < oData.data.length; i += 4) {
    if (oData.data[i] == 0) {
        nNum += 1;
    }
}

//然后用计算出的透明点的数量 除以 实际总点数，就得到了已刮开的百分比
//然后根据这个百分比，判定用户刮开的面积是否达标，然后接着走下面的流程
nNum / ( oData.data.length / 4 );

说了这么多，不如把例子放出来把玩把玩。才刚上线没多久，还热腾腾的，走你

2017年7月10日补充

欧，悲剧，公司的这个项目已经打不开了，只好放一个当时做的demo，虽然功能不强大，但是你们肯定会喜欢的