Я попытался сделать это с холстом globalCompositeOperation
, но мне не повезло, поэтому я спрашиваю здесь. Здесь есть похожие вопросы, но я не нашел их среди них.
У меня есть слои в области холста, так как (порядок рисования снизу вверх):
- База холста заполнена чисто белым (#fff, с fillRect)
- Первое изображение
house
- это изображение дома. Фон прозрачен. (см. ниже). - Второе изображение
roofOverlay
представляет собой наложение "маскировочное" изображение с красной крышей (может быть любым, но красным для ясности, см. ниже).
Оба изображения занимают весь холст и выстраиваются идеально друг на друга, так что красная площадь крыши соответствует дому.
Затем у меня есть повторяющийся фон repeatPattern
, который я хочу использовать ТОЛЬКО внутри красных областей: чтобы заполнить красную область с помощью repeatPattern
. (может быть что угодно, но принимать шестиугольники или что-то еще)
В псевдокоде это в идеале должно быть что-то в строках:
roofOverlay.maskBackground(repeatPattern)
(В обозревателе я также хотел бы иметь возможность связываться со значениями HSL фона, но я думаю, что это довольно просто, как только я получаю шаблон даже для отображения)
Ожидаемый результат:
Ожидаемым результатом будет дом, крыша которого текстурирована с изображением repeatPattern.
Примечание. Я знаю об обтравочных контурах с масками, но я не могу использовать их здесь. Пример упрощен, и рисовать все пути для нескольких разных домов было бы слишком много. У меня есть только наложенные png файлы для крыши.
Изображения для справки
house
roofOverlay