image-processing - HTML5 キャンバス: 回転パターン塗りつぶし

Question

学習プロジェクトとして、HTML5 キャンバスを使用して、Tiny Wings から手続き的に生成された丘を再作成しようとしています。私の目標は、この写真の丘のようなテクスチャを生成することです。

これまでのところ、生成したシームレスな繰り返しテクスチャがあります。次のようになります。

ご覧のとおり、これは途中ですが、Tiny Wings では、正弦波パターンが角度を付けて回転していることがよくあります。私の質問は次のとおりです。シームレスに繰り返されるパターンを取得して回転させ、それを長方形にクリップしても、シームレスに繰り返されるパターンを維持することは可能ですか?

私は当初、これは些細なことだと思っていました。元の寸法にクリップされた回転した繰り返しパターンは、まだ繰り返されます。しかし、調査の結果、そうではないことがわかりました。

私が説明していることが不可能な場合、生成した画像の回転バージョンを形状のパターン/塗りつぶしとして使用するにはどうすればよいですか? これまでのところ、私が考えることができる唯一の解決策は、キャンバス クリップ領域を使用することです。これを達成する他の方法はありますか？

関連する質問:

• html5 キャンバス シェイプの塗りつぶし
• HTML5 Canvas - 円を画像で塗りつぶす

Answer 1

あなたが提供した形状（テクスチャ）を使用して、小さな翼から画像にあるものを実現します。

1. テクスチャ形状を画面に垂直に描画します (回転せずに歪んでいるように見えます)
2. フォン シェーディング効果を作成するには、幅の広い半透明の丘の形をした線をいくつか適用します。
3. テクスチャ形状を丘の形状でクリップします。
4. キャンバス全体に半透明のグランジ テクスチャを適用します。