HTMLCanvasElement
HTMLCanvasElement インターフェイスは、<canvas> 要素のレイアウトや表示を操作するための属性やメソッドを提供します。HTMLCanvasElement は HTMLElement インターフェイスのプロパティやメソッドも継承しています。
インスタンスプロパティ
HTMLElement から継承しているプロパティがあります。
HTMLCanvasElement.height-
この
<canvas>要素のheight属性で、このキャンバスの 1 列分の論理ピクセル数(または RGBA 値の数)を反映した正の整数です。この属性が指定されていないか、無効な値であった場合は、150の既定値が用いられます。もし<canvas>に CSS の高さが[独立して]割り当てられていない場合、この値は CSS ピクセル数の単位で高さとしても使用されます。 HTMLCanvasElement.width-
この
<canvas>要素のwidth属性で、このキャンバスの 1 行分の論理ピクセル数(または RGBA 値の数)を反映した正の整数です。この属性が指定されていないか、無効な値であった場合は、300の既定値が用いられます。もし<canvas>に CSS の高さが[独立して]割り当てられていない場合、この値は CSS ピクセル数の単位で幅としても使用されます。 HTMLCanvasElement.mozOpaqueNon-standard 非推奨-
この
<canvas>要素のmoz-opaque属性を反映した論理値です。半透明の部分の有無をキャンバスに伝えることができます。キャンバスに半透明がないことがわかれば、描画のパフォーマンスを最適化することができます。これは Mozilla ベースのブラウザーでのみ対応しています。代わりに標準化されたcanvas.getContext('2d', { alpha: false })を使用してください。 HTMLCanvasElement.mozPrintCallbackNon-standard-
初期状態では null である関数です。ウェブコンテンツでここに JavaScript 関数を設定すると、ページの印刷中にキャンバスが再描画される際に呼び出されます。呼び出される際、コールバックあkン数には "printState" オブジェクトが渡されます。これは MozCanvasPrintState インターフェイスです。 コールバックは printState オブジェクトから描画するコンテキストを取得することができ、完了したら done() を呼び出す必要があります。
mozPrintCallbackの目的は、使用するプリンターの解像度でキャンバスの高解像度レンダリングを行うことです。このブログ記事を参照してください。
メソッド
HTMLElement から継承しているメソッドがあります。
HTMLCanvasElement.captureStream()-
CanvasCaptureMediaStreamTrackを返します。これはキャンバスの表面に対するリアルタイム動画キャプチャです。 HTMLCanvasElement.getContext()-
このキャンバスのの描画コンテキストを返すか、対応していないコンテキスト ID の場合は null を返します。描画コンテキストを用いてキャンバスに描画することができます。getContext の引数に
"2d"を渡して呼び出すとCanvasRenderingContext2Dオブジェクトを返します。"webgl"(または"experimental-webgl")で呼び出すと、WebGLRenderingContextオブジェクトを返します。このコンテキストは WebGL を実装しているブラウザーでのみ使用できます。 HTMLCanvasElement.toDataURL()-
type引数で指定した形式(既定ではpng)で画像を表現した data-URL を返します。返す画像の解像度は 96dpi です。 HTMLCanvasElement.toBlob()-
キャンパスに格納する画像を表す
Blobオブジェクトを作成します。このファイルは、ユーザーエージェントの判断で、ディスクにキャッシュされたり、メモリーに格納されたりすることがあります。 HTMLCanvasElement.transferControlToOffscreen()-
OffscreenCanvasオブジェクトへの制御権を、メインスレッドまたはワーカーへ移譲します。
イベント
これらのイベントは、addEventListener() を使用して待ち受けしてください。
contextlostExperimental-
ユーザーエージェントが
CanvasRenderingContext2DまたはOffscreenCanvasRenderingContext2Dコンテキストに関連付けられたバッキングストレージが失われたことを検出した場合に発行されます。 contextrestoredExperimental-
ユーザーエージェントが
CanvasRenderingContext2DまたはOffscreenCanvasRenderingContext2Dコンテキストの復元に成功した場合に発行されます。 webglcontextcreationerror-
ユーザーエージェントが
WebGLRenderingContextまたはWebGL2RenderingContextコンテキストを作成することができない場合に発行されます。 webglcontextlost-
ユーザーエージェントが
WebGLRenderingContextまたはWebGL2RenderingContextオブジェクトに関連付けられた描画バッファーが失われたことを検出した場合に発行されます。 webglcontextrestored-
ユーザーエージェントが
WebGLRenderingContextまたはWebGL2RenderingContextオブジェクトの描画バッファーを復元する場合に発行されます。
仕様書
| Specification |
|---|
| HTML Standard # htmlcanvaselement |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- このインターフェイスを実装している HTML 要素:
<canvas>.