在画布上临时覆盖图片

Question

我正在用html5进行演示，这是我想做的事情：

我已经有一个充当绘图板的元素，并且一个人正在其上随机绘图。

现在我想：

• 在画布顶部，暂时显示（覆盖）一张小图片和一些文本消息几秒钟。 然后淡出。

• 覆盖层不应阻止用户继续绘制。

• 覆盖的图片应清晰消失，而不会覆盖下面的波纹管。 或阻止鼠标动作。

我怎样才能做到这一点？

非常感谢您的帮助！

Answer 1

您通过阅读鼠标坐标来进行绘画，如果鼠标按钮按下了，对吗？ 然后，您要做的就是继续从鼠标读取这些值。

如果您只是在canvas元素内部监听鼠标事件，那么可以看到如果在其上方放置任何元素都会出现问题。 如果是这样，您将不得不切换到侦听整个文档上的鼠标事件（ document.addEventListener('mousemove', ...)等）。