Вырезать форму изображения, чтобы показать основное изображение

Question

У меня есть два изображения, игровая доска и одна и та же игровая доска со всеми возможными позициями игрока в нажатом состоянии.Когда игрок перемещается в позицию на доске, я помещаю изображение доски поверх прессованного изображения доски и разрезаю с помощью context.drawImage () на прессованном изображении, чтобы отобразить нажатую позицию через секцию.Тем не менее, моя игровая доска содержит позиции, которые не являются прямоугольными, но имеют разные формы.

Возможно ли с помощью HTML 5 canvas, вырезать непрямоугольную форму из изображения для отображения основного изображения?1004 * Я обнаружил, что можно использовать clip () для фигур, но не могу найти аналогичную опцию для изображений.

Answer 1

вы можете создать третье изображение, которое представляет собой маску с прозрачными (альфа-каналом) пикселями и непрозрачными пикселями, и использовать

 globalCompositeOperation

для объединения маски изамаскированное изображение в новое изображение (думаю, что вы можете использовать xor или исходный код здесь ..