在图像上拖动鼠标，在下方显示另一个图像

Question

我是编写代码的初学者，所以我在这方面有点吃力。我想将两个图像叠加在一起，当您在其上使用鼠标（如拖动或绘画）时，下方的图像将显示在您描摹的位置。我一直在使用这些作为来源，但是 none 其中在顶部使用图像，而我无法用图像替换顶层：

https://codepen.io/uargh/pen/eYmoXgJ 我想我可能需要 ctx.globalCompositeOperation="destination-out"; 但我不太确定如何将它应用于图像

任何帮助将不胜感激，因为我已经为此奋斗了一段时间。

谢谢！ :)

Answer 1

您需要一个静态图像和一个 canvas 元素，这与您所包含的 link 的作用差不多。这是该站点的代码，可进一步深入了解他们如何更新 canvas 元素以获得该效果。 https://rifke.world//js/script.js?ver=1.4。

在 canvas 元素的顶部绘制您想要的图像

Answer 2

我在任何地方都看不到您正在加载第二张图片，我认为您应该这样做：

var img2=new Image();
img2.onload=function(){
    ctx.drawImage(img2,0,0);
};
img2.src="http://placekitten.com/700/1023";

我试过了here，看起来这实现了你想要做的事情。

此外，您可以使用 PageX 和 PageY 而不是 ClientX 和 ClientY，以便您的代码在页面滚动时按预期工作。

Dragging mouse on an image, showing another image underneath