canvas要素

canvas要素は、スクリプトでグラフィックを描く領域を示す要素。

カテゴリー フロー・コンテンツ、フレージング・コンテンツ、エンベディッド・コンテンツ、パルパブル・コンテンツ。
コンテキスト エンベディッド・コンテンツを内包できる要素内で使用できる。
コンテンツ・モデル トランスペアレント・コンテンツ・モデル。
属性 グローバル属性。
任意： width属性、height属性。
ブラウザ対応

構文

<canvas></canvas>

<canvas>
	スクリプトが利用できない環境のための代替内容。
</canvas>

要点

  • canvas要素は、スクリプトでグラフィックを描く領域を示す要素である。
  • canvas要素は、HTML5にて新たに導入された要素である。

属性

任意属性

属性 説明
width属性 スクリプトでグラフィックを描く領域の幅を指定する属性。
height属性 スクリプトでグラフィックを描く領域の高さを指定する属性。

サンプルコード

<canvas id="sample">
	JavaScriptを実行できない環境ですね。
</canvas>
<script type="text/javascript">
	var $canvas = document.getElementById('sample');
	var $context = $canvas.getContext('2d');
	$context.fillStyle ='rgb(255,0,0)';
	$context.fillRect(10,10,50,50);
</script>

サンプル

HTMLソースコード

<canvas id="sampleCanvas" width="200" height="200" style="background-color: #e7e7e7; border: 1px solid gray;">
	JavaScriptを実行できない環境ですね。
</canvas>
<script type="text/javascript">
	var $canvas = document.getElementById('sampleCanvas');
	var $context = $canvas.getContext('2d');
	$context.lineWidth = 10;
	$context.strokeStyle ='rgb(255,0,0)';
	$context.strokeRect(10,10,150,150);
	$context.fillStyle = 'rgba(255,255,0,0.5)';
	$context.fillRect(30,30,150,150);
</script>

実際の表示

JavaScriptを実行できない環境ですね。