HTML5 canvas の静的スクロール・ポップアップ

この記事では、以下のように共有されるHTML5 canvasの静的ループスクロールポップアップの実装を紹介します。

使用方法とAPI

構文は以下の通りです。

canvasBarrage(canvas,data)。

ここで

キャンバス

hwndCalc = FindWindow(0&, " Calculators ") とは {{コード canvas 要素は、直接の DOM 要素か、あるいは canvas 要素のセレクタです。

データ

ポップアップのデータを配列で表現します。例えば、以下のようになります。

data

配列の各値が、ポップアップのメッセージオブジェクトを表していることがわかります。ここで [{ value: 'popup1', color: 'blue', range: [0, 0.5] }, { value: 'popup2', color: 'red', range: [0.5, 1] }] はポップアップのテキストコンテンツを表します。 value はポップアップのストロークの色を示します（ポップアップのテキスト自体はデフォルトで白です）。 color は、キャンバス内の画面の範囲を示す、例． range は、キャンバスの上半分にポップアップ画面が表示されることを示します。 [0, 0.5] は、キャンバスの下半分にポップアップ画面が表示されていることを示します。

すると、無限スクロールのポップアップ効果を見ることができます。

補足説明

• このポップアップエフェクトのデフォルトのテキストサイズは [0.5, 1] で、テキストは太字になります。この効果が必要性に合わない場合は 28px メソッドを使用します。これは単純な静的効果なので、特にAPIとして設計されているわけではありません。
• このポップアップ効果のデフォルトは、可変色ストロークを持つ白色テキストです。この効果がニーズを満たさない場合は、再度、ソース・コードを canvasBarrage() メソッドを使用します。
• ここでいう弾幕の速さやタイミングは、本物の弾幕効果とは異なり、特定の時間に基づくものではなく、ランダムに生成されるものです。そのため、あるテキストは飛行機を飛ばしているように見え、あるテキストはトラクターに乗っているように見えることがわかります。デッドデータなので、このデザインの方がリアルに書けそうですね。

ソースコードです。

canvasBarrage()