刮刮卡

[XJIANBIN]

巨人

https://github.com/ZENGzoe/vue-scratch-card/

https://github.com/Masth0/ScratchCard

https://juejin.cn/post/6844903952157245447#heading-15

canvas 画刮刮卡的原理

思路功能

• 下面背景为结果图片
• 上面用canvas 画一张遮罩图片
• 当用户滑动操作时候，利用canvas arc画线，设置globalCompositeOperation=destination-out，便可以划线区域透明，达到刮卡（或者签名）的效果。
• 实现事件监听，需要主要只有touchstart或者mousedown 按下的时候才开始绘制
• 通过getImageData，获取canvas 图片数据，判断第四位是不是0，就可以知道是不是透明，通过判断透明的点数和总的像素数，计算刮开面积。

有的时候，实现是很简单的，而如何深入思考才是最重要的。比如说检查图层刮开的百分比的时候，是不是可以优化下计算速度。可以将图层以刮开的半径分割网格，从而降低检查次数。另外计算的时候要刨除掉四周，有可能刮了一圈但是没有刮中间的字，此时给他全都展示出来是不合适的。比如可以采用加权处理的方式。