image-processing - HTML5 Canvas : Rotated Pattern Fill

Question

作为一个学习项目，我正在尝试使用 HTML5 Canvas 从 Tiny Wings 重新创建程序生成的山丘。我的目标是生成像这张图片中的山丘的纹理:



到目前为止，我已经生成了一个无缝的重复纹理。它看起来有点像这样:



正如您所看到的，这只是其中的一部分，但是在 Tiny Wings 中，正弦曲线通常会旋转一个角度。我的问题是:是否可以采用无缝重复的图案，旋转它，然后将其剪裁成一个矩形并且仍然具有无缝重复的图案？

我最初认为这是微不足道的，任何裁剪到原始尺寸的旋转重复图案仍然会重复。然而，我的调查使我相信事实并非如此。

如果我所描述的不可能，我将如何使用我生成的图像的旋转版本作为形状的图案/填充？到目前为止，我能想到的唯一解决方案是使用 Canvas 剪辑区域。有没有其他方法可以做到这一点？

相关问题:

html5 canvas shapes fill

HTML5 Canvas - Fill circle with image

Answer 1

使用您提供的形状(纹理)从微小的翅膀中实现图像中的内容。

将您的纹理形状垂直绘制到屏幕上(看起来它已经倾斜而不是旋转)

应用一些半透明的山形线条，笔触宽度较宽，以创建 phong 阴影效果。

用山的形状剪裁纹理形状。

将半透明的垃圾纹理应用于整个 Canvas 。