HTML5帆布：旋转图案填充

Question

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

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

正如你所看到的，这是有一部分的方式，但是在微型翼，正弦曲线模式通常旋转一个角度。我的问题是这样的：是否有可能采取无缝重复模式，旋转它，然后将其剪切成矩形并仍然具有无缝重复模式？

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

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

相关问题：

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

Answer 1

达到什么是使用你提供的形状（纹理）的小翅膀的形象。

1. 提请纹理形状垂直于屏幕（看起来它一直skew'ed不旋转）
2. 申请几个半透明山形线具有宽笔划宽度以创建Phong浓淡效果。
3. 以山的形状剪裁纹理形状。
4. 在整个画布上应用半透明的垃圾纹理。