本文主要介绍了html5通过canvas实现刮刮卡效果的示例，大家参考使用吧

修改img.src时涂层也会自动适应新图片的尺寸.

修改layer函数可更改涂层样式

以下是HTML源代码(已增加移动设备支持):

代码如下:

需要判断是否刮完时用这段代码替换原代码的eventUp事件处理函数:

代码如下:

e.preventDefault();

mousedown = false;

var data=ctx.getImageData(0,0,w,h).data;

for(var i=0,j=0;i

if(data[i] && data[i+1] && data[i+2] && data[i+3]){

j++;

}

}

if(j<=w*h*0.1){

alert('ok');

}

这段代码中的0.1是10%的意思,在涂层的面积小于等于10%时,就弹出窗口,表示刮完了,可以根据需求自行调整