私のtumblrテーマではcanvas、背景に何かを描いていますが、無限スクロールを使用すると、canvas大きすぎて描画できなくなるまでにそれほど時間がかかりません（ブラウザなどによって異なります-制限に達していません） Chrome ではまだ）。
ここで ( packery 内の)canvas投稿間のギャップを埋めるために提案されたため、を使用していますが、代わりに背景を持つブロックを使用して絶対配置された要素を作成し、サイズ変更時に破棄して再作成するのがはるかに悪い解決策になるかどうか疑問に思っていました/再レイアウト。
最善の解決策は何ですか？より多くの投稿が読み込まれるたびに、javascript でオンザフライでより多くのキャンバスを作成する必要がありますか?もしそうなら、これを行うための最良の方法は何でしょうか? キャンバスを捨てて、代わりに絶対配置要素を使用するのは恐ろしい考えでしょうか?
正解は「キャンバスを使うな、バカ」だったようです。
だから私は絶対に配置された div 要素で物事をやり直しました。ケースを閉じました。
ダメダメダメ。無限スクローラーを実行するときは、2 つのこと (一方または他方、または両方) を行う必要があります。
1) 背景テクスチャをスクロールする
背景に巨大なテクスチャや画像を作成しないでください。シームレスに何度も繰り返すことができるイメージであるパターンを作成します。
次に、パターンをオフセットして動きの効果を与えますが、実際には初期座標の変位を作成しているだけです。一部のゲーム エンジンではテクスチャを「繰り返し」に設定する必要がありますが、HTML5 キャンバスでは「繰り返し」がデフォルトです。
この 2 つの投稿をチェックして、探しているパターンと翻訳コマンドについて学びましょう。
2) 障害物の作成と破壊 (ゲーム用)
現在画面に表示されている障害物と、画面に入ろうとしている新しい障害物の 2 つのセットを用意します。それらを左に移動し (スクローラーが水平であると仮定)、障害物の最初のセットが画面から外れ、障害物の 2 番目のセットが現在表示されているとすぐに、障害物の最初のセットのすべてのオブジェクトを破棄し、オフに新しいセットを作成します。画面を右側の領域に移動します。このようにして、無限の数や非常に大きな数ではなく、常に 2 セットの障害物しかありません。
私は通常、目に見えない障害物と障害物の終わりを設定して、障害物が見えなくなったときに、すべてではなく 1 つのオブジェクトだけをチェックすることで簡単に検出できるようにします。
方法 1 の代わりに、複製されたパターン テクスチャ (シームレスな再編集可能な画像) を使用して、背景に対してこれを行うこともできます。常に2つを描いて同じ速度で動かし、片方が左に画面からはみ出したら右側に移動し、再び両方を左に動かし続けます。
このテクニックで背景をスクロールするこの素晴らしい例を見つけました: