DOM

HTMLCanvasElement インタフェース

  編集:2022.02.22 by T.A.

MSMS(en)

canvas 要素のレイアウトや表現の操作のための属性やメソッドを提供します。HTMLCanvasElement は HTMLElement インタフェースのプロパティやメソッドも利用可能です。

属性

HTMLElement から継承する属性の他に以下の属性を持ちます。

HTMLCanvasElement.height→en-US
正の integer で height(MS) というHTMLの canvas 要素の属性で指定された CSS ピクセルの値です。もしこの属性が指定されていないか、無効な値であるならば、デフォルト値として 150 を用います。
HTMLCanvasElement.mozOpaque→en-US
Boolean で moz-opaque(MS) という canvas 要素(MS)で指定されたものを反映したものです。この属性は canvas が半透明であることが重要か否かを指定します。もし半透明がないならば、描画を最適化できます。
HTMLCanvasElement.width→en-US 正のinteger でwidth(MS) というHTMLの canvas 要素の属性で指定された CSS ピクセルの値です。もしこの属性が指定されていないか、無効な値であるならば、デフォルト値として 300 を用います。
メソッド

HTMLElement から継承するメソッドの他に以下のメソッドを持ちます。

HTMLCanvasElement.captureStream() 実験的(MS
、canvas の前面をリアルタイムにキャプチャした動画を CanvasCaptureMediaStream(en-US)として返すメソッドです。
HTMLCanvasElement.getContext()→en-US
Canvas の描画コンテキストを返すか、サポートされていないコンテキスト ID の場合 null を返します。

描画コンテキストを用いて Canvas に描画することができます。

getContext の引数に "2d" を渡すと CanvasRenderingContext2D オブジェクトを、"experimental-webgl"(または "webgl")を渡すと WebGLRenderingContext オブジェクトを返します。

"experimental-webgl" または "webgl" コンテキストは、ブラウザが WebGL に対応している場合に限り使用できます。

HTMLCanvasElement.toDataURL()→MStype パラメータ(デフォルトはPNG形式)で指定される画像フォーマット形式の data URI を返すメソッドです。返り値となる画像の解像度は 96 dpiです。
HTMLCanvasElement.toBlob()→MS
キャンバスに含まれる画像を表す Blob オブジェクトを生成します。
HTMLCanvasElement.transferControlToOffscreen()→実験的:en-US
Transfers control to an OffscreenCanvas object, either on the main thread or on a worker.
HTMLCanvasElement.mozGetAsFile()→en-US廃止?非推奨?
Returns a File object representing the image contained in the canvas; this file is a memory-based file, with the specified name. If type is not specified, the image type is image/png.

HTML:

ここに表示
スクリプト:


スクリプト:



表示内容:
表示内容: