简体繁体 English

如何根据鼠标移动在 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-04-14 10:57:51 3 1 javascript/ html/ image/ canvas

I want to draw an image on top of my html page depending on my mouse movement.我想根据鼠标移动在 html 页面上绘制图像。 How can i do that?我怎样才能做到这一点？ Is it a better approach to put the image below the rest of the html and scratch the html somehow away, or tu put the image above it and add it partially on top.将图像放在 html 的 rest 下方并以某种方式刮掉 html 的更好方法，还是将图像放在其上方并将其部分添加到顶部。

I found solutions on the internet with 2 images on top of each other where the top one is erased with canvas, but since i have multiple elements i want to overwrite, i have no idea how to solve it.我在互联网上找到了两个相互重叠的图像的解决方案，其中最上面的一个被 canvas 擦除，但由于我有多个要覆盖的元素，我不知道如何解决它。

1 个解决方案

Assuming I've interpreted the question correctly, that the requirement is to allow the user to 'scratch away' at the page gradually revealing an image, you could do it either way.假设我已经正确解释了这个问题，要求是允许用户在逐渐显示图像的页面上“刮掉”，你可以这样做。

There are libraries that will create a canvas of a page (or part thereof) such as htm2canvas.有些库将创建页面（或其部分）的 canvas，例如 htm2canvas。 Using one of these you turn your page into an image, place it over the given image and remove (make transparent) pixels on the top canvas as the mouse moves.使用其中一个将页面转换为图像，将其放在给定图像上，并在鼠标移动时移除（使透明）顶部 canvas 上的像素。 The drawback with this approach is that it's possible the conversion of the HTML to canvas isn't totally complete.这种方法的缺点是 HTML 到 canvas 的转换可能并不完全完成。 There may be some aspects for example of CSS that aren't correctly rendered.例如 CSS 的某些方面可能未正确呈现。

To be sure therefore it's probably better to do it the other way round.可以肯定的是，因此最好反过来做。 Lay a blank canvas over the page and copy the image to another canvas with the same dimensions but which is outside the viewport.在页面上放置一个空白 canvas 并将图像复制到另一个具有相同尺寸但在视口之外的 canvas。 As the mouse moves over the blank canvas copy the relevant pixels from the offscreen canvas to it.当鼠标移动到空白 canvas 上时，将屏幕外 canvas 中的相关像素复制到它。

If you could confirm that I've understood your question correctly I could go into more detail.如果您可以确认我已正确理解您的问题，我可以更详细地了解 go。