如何根据鼠标移动在 html 页面顶部绘制图像的一部分？ （有或没有画布）

Posted 2023-03-05

【中文标题】如何根据鼠标移动在 html 页面顶部绘制图像的一部分？ （有或没有画布）

【英文标题】：How can i draw a part of an image on top of a html page depending on my mouse movement? (with or without canvas)

【发布时间】：2021-07-09 10:10:12

【问题描述】：

我想根据我的鼠标移动在我的 html 页面顶部绘制一个图像。 我怎样才能做到这一点？将图像放在 html 的其余部分下方并以某种方式刮掉 html 是否更好，或者将图像放在其上方并将其部分添加到顶部。

我在互联网上找到了两个相互重叠的图像的解决方案，其中最上面的一个被画布擦除，但由于我有多个要覆盖的元素，我不知道如何解决它。

【问题讨论】：

我不太明白你想要做什么。这就像一张刮刮卡，当您在页面上刮擦时，图像会慢慢曝光？

【参考方案1】：

假设我已经正确解释了这个问题，即要求允许用户在逐渐显示图像的页面上“刮开”，你可以这样做。

有些库可以创建页面（或其一部分）的画布，例如 htm2canvas。使用其中之一，您可以将页面转换为图像，将其放在给定图像上，并在鼠标移动时移除（使透明）顶部画布上的像素。这种方法的缺点是 HTML 到画布的转换可能不完全完成。例如 CSS 的某些方面可能没有正确呈现。

可以肯定的是，因此最好反过来做。在页面上放置一个空白画布并将图像复制到另一个具有相同尺寸但位于视口之外的画布。当鼠标在空白画布上移动时，将屏幕外画布中的相关像素复制到它。

如果您能确认我已正确理解您的问题，我可以更详细地说明。