Перетаскивая мышку на изображение, показывая другое изображение под

Question

Я новичок в написании кода, поэтому немного борюсь с этим. Я хочу, чтобы два изображения были наложены друг на друга, и когда вы используете мышь для перетаскивания или рисования, изображение внизу будет отображаться в местах, которые вы проследили. Я использовал их в качестве источника, но ни один из них не использует изображение сверху, и я не смог заменить верхний слой изображением:

https://rifke.world

https://codepen.io/uargh/pen/eYmoXgJ Я думаю, что мне, вероятно, понадобится ctx.globalCompositeOperation="destination-out";, но я не слишком уверен, как применить его к изображению

Любая помощь будет очень признательна так как я боролся с этим некоторое время.

Спасибо! :)

Answer 1

Я нигде не вижу, чтобы вы загружали второе изображение, я думаю, что вы должны сделать что-то вроде:

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

Я попробовал здесь , похоже, что вы достигаете того, что вы пытаются сделать.

Кроме того, вы можете использовать PageX и PageY вместо ClientX и ClientY, чтобы ваш код работал, как и ожидалось, при прокрутке страницы.

Answer 2

Вам понадобится stati c изображение и элемент canvas, в значительной степени то, что делает ссылка, которую вы включили. Вот код с этого сайта, чтобы узнать, как они обновляют элемент canvas для этого эффекта. https://rifke.world//js/script.js?ver=1.4.

Вы можете нарисовать нужное изображение сверху на элементе canvas, используя следующий метод https://www.w3schools.com/tags/canvas_drawimage.asp.