キャンバス

Canvas コンストラクタは、 HTML5 の canvas 要素を新規に生成し、ウェブページに追加します。

これは p5.js の createCanvas 関数と似ていますが、いくつかの機能が追加されています！

キャンバスの幅を得るには canvas.w を、高さを得るには canvas.h を使います。 canvas.hw はキャンバスの幅の半分の値 (half width) を、 canvas.hh はキャンバスの高さの半分の値 (half height) を取得します。

new Canvas() に引数が渡されない場合、ウィンドウいっぱいにキャンバスが生成されます。

キャンバスのコンストラクタに、アスペクト比（縦横比）を渡すこともできます。これにより、与えられたアスペクト比を維持しながら、ウィンドウに収まる最大のキャンバスが生成されます。例えば、 new Canvas('2:1') は、横幅が縦幅の 2 倍のキャンバスを生成します。

表示モード

displayMode 関数を使用すると、キャンバスの表示方法をカスタマイズできます。

• "normal" はデフォルトで、キャンバスやその親要素にスタイルを適用しません
• "centered" はキャンバスを親要素の中央に水平および垂直に配置します
• "maxed" はキャンバスが親要素を埋め、必要に応じてアスペクト比を維持するためにレターボックスを使用します

この関数は、レンダリング品質のプリセットを 2 番目の入力パラメータとして受け取ります。8 ビットまたは 16 ビットスタイルのレトロゲームを作成するには、"pixelated" プリセットを使用してください！

この例では、キャンバスを 8 倍のスケールで表示するために 3 番目の入力パラメータが使用されています。

すべてのスプライトを整数座標で表示するには、allSprites.pixelPerfect を true に設定し、カメラの位置とズームに整数座標を使用します。

現代のフォントはベクターベースなので、低解像度では見栄えが良くありません。代わりに、loadFont 関数を使用してピクセルフォントを読み込んでください。

キャンバスのリサイズ

resizeCanvas または canvas.resize 関数は、キャンバスの幅と高さを指定された値に変更します。

キャンバスの視覚的なサイズは、新しいサイズに拡大・縮小されます。スプライトの位置は変わりません。

カメラのフォーカスを同じエリアに合わせ続けたい場合は、この関数を呼び出した後、手動でカメラの位置を調整してください。