<canvas>~</canvas>
canvas（キャンバス）要素は、スクリプトによって動的にグラフィックを描写可能なビットマップキャンバスを提供します。例えば、グラフを描写したり、ゲームなどのビジュアルイメージをその場でレンダリングするために使用したりできます。
| canvas要素 | 説明 |
|---|---|
| カテゴリー | ・エンベッディッドコンテンツ ・パルパブルコンテンツ ・フレージングコンテンツ ・フローコンテンツ |
| コンテンツモデル | トランスペアレントコンテンツ ＊ただし、a要素、usemap属性を持つ img要素、button 要素、type属性が checkbox、radio、buttonのいずれか状態にある input要素、multiple属性、または「1」以上の size属性値を持つ select要素、および要素に tabindex属性が指定されている場合を除き、インタラクティブコンテンツを子孫に持つことはできない。 |
| 使用できる場所 | エンベッディッドコンテンツが期待される場所 |
canvas要素で使用できる属性
グローバル属性
すべてのHTML要素で使用できる属性になります。
width属性
width属性は要素の横幅を指定します。値には正の整数を指定する必要があります。
width=”500″
height属性
height属性は要素の高さを指定します。値には正の整数を指定する必要があります。
height=”500″
緑色の線で四角形を描写する。
使用例
<html>
<head>
<meta charset="utf-8">
<title>canvas 描写テスト</title>
<script>
window.onload = function() {
var canvas = document.getElementById('canvas');
if ( ! canvas || ! canvas.getContext ) {
return false;
}
var ct = canvas.getContext('2d');
ct.strokeStyle = '#009900';
ct.strokeRect(50, 50, 200, 200);
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>表示