HTML5 Canvas: повернутая заливка

Question

В качестве учебного проекта я пытаюсь воссоздать процедурно сгенерированные холмы из Tiny Wings, используя холст HTML5.Моя цель - создать текстуры, похожие на холм на этой картинке:

Пока у меня есть бесшовная повторяющаяся текстура, которую я сгенерировал.Это выглядит примерно так:

Как вы можете видеть, это часть пути, однако в Tiny Wings узоры синусоид часто вращаются на угол.Мой вопрос таков: Можно ли взять плавно повторяющийся узор, повернуть его, затем обрезать его в прямоугольник и все еще иметь плавно повторяющийся узор?

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

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

Смежные вопросы:

• html5 заливка форм холста
• HTML5 Canvas - Fillкруг с изображением

Answer 1

Чтобы получить то, что на изображении, из крошечных крыльев, используя предоставленную вами форму (текстуру).

1. нарисуйте вашу текстуру-фигуру вертикально на экране (похоже, что она не была скошена)повернуто)
2. примените несколько полупрозрачных линий в форме холма с широкой шириной обводки, чтобы создать эффект затенения по фонгу.
3. обрезать текстуру в форме холма.
4. применить полупрозрачную гранжевую текстуру ко всему холсту.