javascript - 如何在基于触摸屏的应用程序上实现划痕功能

Question

我正在开发触摸屏功能。如下所示:

因此，用户可以用手指划过灰色层，并显示他是否是赢家。

我的问题是，如何使用 Javascript 和 HTML5 实现这一点？

有人给我一些指点吗？

Answer 1

是的，这是我会采用的基本方法:

1. 在 HTML5 Canvas 中绘制带有灰色背景的刮痕图像。
2. 为 mousedown 和 touchstart 事件附加事件处理程序以将 isDrawing 标志设置为 true。相反，为 mouseup 和 touchend 添加处理程序以将标志设置为 false。
3. 为 mousemove 和 touchmove 附加一个事件处理程序，以检查 isDrawing 是否存在，如果是，则复制图像的圆形部分，其中包含在划痕涂层后面咬到光标/手指的位置。

对于最后一个，您需要弄清楚如何使用 mask 技术将图像的正确圆形部分绘制到 Canvas 上，圆圈外的部分透明。