備忘録的プログラミングリファレンス

canvasエレメント

 <canvas>エレメントは、グラフィックを描写するためのタグエレメントです。編集しながらの描写するためにはJavaScriptなどのスクリプトが必要です。

canvas
<!-- 描写するタイミングのためのボタン -->
<button onclick=draw_Example()>描写する</button>

<canvas id="example" width="600" height="300"></canvas>

<script type="text/javascript">
function draw_Example(){
	// コンテキストオブジェクトの生成
	// 以下は 2D を描写するためのコンテキストオブジェクトを返す
	var _context = document.getElementById('example').getContext('2d');

	// 塗りつぶされた四角を描写する
	_context.fillRect(50,50,300,260);
}
</script>
	
詳しくは「動作の確認」を参照してください。

 <canvas>エレメントに対応していないブラウザ用に、<canvas>、</canvas>の間にテキストを定義できます。対応していないブラウザでは<canvas>エレメントのinnerTextが表示されます。

属性

グローバル属性も持ちます。以下に主な属性のみを示します。

AttributeValueExtra information
idcssにも使えます。エレメントをユニークとします。
classcssに使います。同名のclassは同じスタイルが適応されます。
innerTextもし、ブラウザーが<canvas>に対応していない場合の代替テキスト

動作の確認

JavaScript ( DOM )

 <canvas> エレメントについては HTMLCanvasElement インターフェイスに定義されています。