H5 canvas制作刮刮卡效果并计算清理结果

简要步骤如下

1.绘制底图 载体任意DOM CANVAS 图片皆可
2.canvas绘制交互区域 纯色或图片皆可
3.设定混合模式 "destination-out" 关键
4.根据交互情况绘制清理区域

计算绘制结果

1.原理:检测canvas绘制结果像素点的透明度情况
2.要点:像素过多的情况不必每个像素都对应检测 耗时过大 可自行设计采样方式

演示链接:

点我

源码如下:




    
    小互动-刮刮卡
    





    
谢谢惠顾

0%

你可能感兴趣的:(H5 canvas制作刮刮卡效果并计算清理结果)