html5实现刮刮卡效果

通过Canvas实现的可刮涂层效果.

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

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

涂层:





可刮效果:





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

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

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