HTML5 Canvas：旋转图案填充

Question

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

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

正如你所看到的，这是在那里的一部分，然而在Tiny Wings中，正弦曲线图案通常以一定角度旋转。我的问题是：是否可以采用无缝重复模式，旋转模式，然后将其剪切为矩形并仍然具有无缝重复模式？

我原本以为这是微不足道的，任何剪裁到原始尺寸的旋转重复图案仍会重复。然而，我的调查让我相信情况并非如此。

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

相关问题：

• html5 canvas shapes fill
• HTML5 Canvas - Fill circle with image

Answer 1

使用您提供的形状（纹理）从小翅膀中获得图像中的内容。

1. 将您的纹理形状垂直绘制到屏幕上（看起来它已经倾斜不旋转）
2. 应用一些具有宽行程宽度的半透明山形线条以产生phong阴影效果。
3. 用山丘的形状剪裁纹理形状。
4. 将半透明的grunge纹理应用于整个画布。