HTML5 Canvas：旋转图案填充
aar*_*ell 5 textures image-processing procedural-generation html5-canvas
作为一个学习项目，我尝试使用 HTML5 画布重新创建 Tiny Wings 中程序生成的山丘。我的目标是生成像这张图片中的山一样的纹理：
到目前为止，我已经生成了一个无缝重复纹理。它看起来有点像这样：
正如您所看到的，这只是其中的一部分，但是在《Tiny Wings》中，正弦曲线图案通常会旋转一定角度。我的问题是：是否可以采用无缝重复的图案，旋转它，然后将其剪裁为矩形，并且仍然具有无缝重复的图案？
我最初认为这是微不足道的，任何剪辑到其原始尺寸的旋转重复图案仍然会重复。然而，我的调查使我相信事实并非如此。
如果我所描述的不可能，我将如何使用我生成的图像的旋转版本作为形状的图案/填充？到目前为止，我能想到的唯一解决方案是使用画布剪辑区域。还有其他方法可以实现此目的吗？
相关问题：
使用您提供的形状（纹理）从小翅膀实现图像中的内容。
- 垂直于屏幕绘制纹理形状（看起来像是倾斜而不是旋转）
- 应用一些具有宽描边宽度的半透明山形线条来创建 phong 阴影效果。
- 将纹理形状剪裁为山的形状。
- 将半透明的垃圾纹理应用于整个画布。