如何在HTML页面上获得光标跟踪效果

Question

我正在学习jquery，我正在试图弄清楚如何在鼠标移动到HTML页面时添加跟踪效果 感谢。

Answer 1

在此处查看此解决方案：https://github.com/Masth0/ScratchCard

此外，您可以在谷歌搜索“刮刮卡”并找到许多codepan.io板。

Answer 2

是的，可以复制效果。让我们先看看它是如何实现的：

1）创建尺寸等于窗口的内存中画布。此画布将用作蒙版。

2）将mousemove处理程序附加到文档。调用时，它会存储光标的坐标和当前时间戳。

3）将鼠标坐标连接到路径中，然后在模糊阴影的笔触画布上进行描边。

4）一秒钟后将路径段淡化为透明。

5）根据光标速度改变路径段的宽度（计算为相邻点之间的距离）。慢速运动导致粗线，快速运动导致变薄。

6）准备要显示的图像的模糊和黑暗版本，并使其成为页面背景。

7）在尺寸等于窗口的文档中添加画布。

8）将原始图像渲染到文档画布。

9）使用destination-in合成操作将蒙版画布渲染到文档画布 - 这会掩盖现有画布内容。

致谢：Chris Doble

在此处找到它：5 Visual Effects Canva Uses to Thrill Users

玩得开心！