4

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

小翅膀截图

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

程序图像 1

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

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

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

相关问题:

4

1 回答 1

1

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

  1. 将您的纹理形状垂直绘制到屏幕上(看起来它已经倾斜而不是旋转)
  2. 应用一些具有宽笔画宽度的半透明山形线条来创建 phong 阴影效果。
  3. 用山的形状剪裁纹理形状。
  4. 将半透明的垃圾纹理应用于整个画布。
于 2012-02-06T12:20:00.280 回答