2

HTML5 キャンバスで Javascript を使用してタイル張りの背景を描画しようとしていますが、キャンバスの端と交差する形状が反対側に回り込まないため、うまくいきません。(はっきりさせておきますが、これらは静的な形状であり、時間の動きは含まれていません。) キャンバスの片側で中断されたオブジェクトを反対側に折り返すにはどうすればよいですか?

基本的に、私は多くのビデオ ゲームで使用されている「ラップアラウンド」効果を探しています。最も有名なのは小惑星です。ここで静的な目的のためにその効果が欲しいだけです。このページは、それが可能であることを示す例のようです。たとえば、画面の右端にある小惑星 (動いているかどうかにかかわらず) が左端まで続いていることに注意してください。さらに言えば、隅にあるオブジェクトが 4 つの隅すべてに分割されます。繰り返しますが、必ずしも動きが含まれているわけではありません。

端を囲む四角形や線を描く方法を知っている人はいますか? キャンバスまたはJavascriptのオプションのようなものはありますか? 明らかなキーワードを使用した私のグーグル検索は空になりました。

編集

もう少しコンテキストを提供するために、ここの例に基づいて作業を行っています: Canvas as Background Image。(ここからもリンクされています: Use <canvas> as a CSS background。) 画像を繰り返しても問題ありません。問題は、形状の切り捨てられた部分を反対側に折り返すことです。

4

2 に答える 2

1

いつでもキャンバスにティル可能な画像を作成し、toDataUrl() を生成してから、そのデータ URL を背景として何かに割り当て、CSS にタイリングを行わせることができます。

編集: 耕作可能な画像の描画に問題がある場合は、幅 3*幅 x 幅 3* のキャンバスを作成し、通常どおりに描画して (最終結果としてデータの中央の正方形からデータを取得すると仮定して)、キャンバスのサブセットからそれ自体に描画することはできません。あなたが使用する必要があるように見えます：

var myImageData = context.getImageData(左、上、幅、高さ); context.putImageData(myImageData, dx, dy);

（適切な測定で）

https://developer.mozilla.org/En/HTML/Canvas/Pixel_manipulation_with_canvas/

編集 II: アイデアは、関心のある中心領域を持つ十分な大きさのキャンバスと、描画する可能性のある形状のいずれかを説明するのに十分な大きさのバッファ領域を周囲に持つというものでした:

XXX  
XCX
XXX

この大きなキャンバスに一度形を描いてから、Xその中心領域の周りの各領域をやみくもに中心領域に描くことができます (そして、次の描画のためにそれらの領域をクリアします)。したがって、K が 4*K ドローの代わりにシェイプの数である場合、K + 8 ドロー (そして 8 クリア) があります。明らかに、これが実際に適用できるかどうかは、シェイプの数と重複する関心事に依存しますが、微調整できると思います。形状の複雑さによっては、最初に考えたように形状を 4 回描画することや、バッファーまたはバッファー領域に描画してからピクセル データを 4 回描画することが理にかなっている場合があります。認めますが、これは頭に浮かんだアイデアなので、何かが足りない可能性があります。

編集 III: そして本当に、あなたはそれについて賢いかもしれません. オブジェクトのセットがどのようにオーバーラップするかがわかっている場合は、バッファーから一度描画するだけで済みます。北のオーバーラップ領域のみを描画する一連の形状があるとします。これらの図形を描画してから、北側のオーバーラップ領域を南側に描画するだけです。毛むくじゃらの領域は角になりますが、形状が大きくない限り、毛むくじゃらになることはないと思います..ため息..この時点で、おそらく静かにして、私が話していることの既存の実装があるかどうかを確認する必要があります私の書いたすぐにできることが誰かを助けているかどうかわからないので、そこにいます。

于 2012-08-02T16:00:51.287 に答える
1

タイルをどのようにセットアップしたかはわかりませんが、それらがすべて、0,0 で独自の x、x を持つ単一の「ラッパー」スライドの一部である場合、実際にはそれを 2 回描画するだけで済みます。または、必要に応じて新しいスライドを生成します。このコードが概念をよりよく説明することを願っています。

// Here, the 'tilegroup' is the same size of the canvas
function renderbg() {
    tiles.draw(tiles.posx, tiles.posy);
    if(tiles.posx < 0) 
        tiles.draw(canvas.width + tiles.posx, tiles.posy);
    if(tiles.posx > 0) 
        tiles.draw(-canvas.width + tiles.posx, tiles.posy);
}

基本的に、ここでのアイデアは、タイルのグループを 2 回描画することです。実際の位置に一度、そして再びギャップを埋めるために。グループ全体がキャンバスから完​​全に離れた時点を計算してからリセットする必要がありますが、これが正しい方向に導くことを願っています!

于 2012-08-02T04:32:03.073 に答える