如何在基于触摸屏的应用程序上实现临时功能

Question

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

因此，用户可以用手指划伤灰色层并显示他是否是胜利者。

我的问题是，如何通过使用Javascript和HTML5来实现这一目标？

有人给我一些指示吗？

Answer 1

是的，这是我要采取的基本方法：

1. 使用HTML5画布中的灰色背景绘制您的图像。
2. 附加mousedown和touchstart事件的事件处理程序，以将isDrawing标志设置为true。相反，为mouseup和touchend添加处理程序以将标记设置为false。
3. 附加mousemove和touchmove的事件处理程序以检查是否isDrawing，如果是，请将包含刮擦涂层后面的位的图像的圆形部分复制到位置光标/手指。

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