HTML5 <canvas> タグ
例
その場で、赤い矩形を描画し、<canvas> 要素の内部に表示します:
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
Try it yourself »
ブラウザ・サポート
<canvas> タグは、主要な全ブラウザがサポートしています。
定義と用法
<canvas> タグは、スクリプト（通常は JavaScript）を経由して、その場で、図形を描画するために使用されます。
<canvas> タグは、図形のコンテナにすぎず、実際に図形を描くにはスクリプトを使用しなければなりません。
HTML 4.01 と HTML5 との相違点
<canvas> タグは、HTML5 で新たに追加されました。
チップスと注意事項
注: <canvas> と </canvas> 間のテキストは、
<canvas> 要素をサポートしていないブラウザで表示されます。
チップ:キャンバス・オブジェクトで使用できるすべての属性とメソッドの完全なリファレンスについては、
完全な canvas 2d リファレンスを参照してください。
属性
New : HTML5 で新規追加。
| 属性 |
値 |
説明 |
| heightNew |
pixels |
Sキャンバスの高さを指定する |
| widthNew |
pixels |
キャンバスの幅を指定する |
グローバル属性
<canvas> タグは、HTML5におけるグローバル属性 もサポートします。
イベント属性
<canvas> タグは、HTML5におけるイベント属性 もサポートします。
|