HTML リファレンスマニュアル

HTML タグ全集

HTML: <canvas> タグ

HTMLの<canvas>タグはHTML5タグはHTMLドキュメント内で描画2Dオブジェクトやビットマップ画像などのグラフィックのコンテナです。このコンテナ内の実際のグラフィックは<script>タグで描画されます。このタグは通常<canvas>要素とも呼ばれます。

オンラインサンプル

HTMLの<canvas>要素を使って青色の正方形を表示します：

サンプル

!doctype　html>
<html>
<head>
<meta　charset="UTF-8">
<title>HTML5　canvas　by　ja.oldtoolbag.com</title>
</head>
<body>
<h1>Graphics　Example</h1>
<canvas　id="w3codebox_com_canvas"　width="125"　height="125></canvas>
<script>
　　var　canvas　=　document.getElementById("w3codebox_com_canvas");
　　var　ctx　=　canvas.getContext("2d");
　　ctx.fillStyle　=　"#4B6692";
　　ctx.fillRect(25,　25,　100,　100);
　　ctx.clearRect(45,　45,　60,　60);
　　ctx.strokeRect(50,　50,　50,　50);
</script>
</body>
</html>

テストを見てみましょう ‹/›

このHTML5ドキュメントの例では、<canvas>タグを使って以下のサイズで125px x 125pxでIDが3codebox_com_canvas。<script>タグはこのコンテナ内でグラフを描画するために使用されます。この例では、斜面内部を持つ青色の正方形を描画しました。

ブラウザの互換性

IEFirefoxOperaChromeSafari

IE 9、Firefox、Opera、Chrome、Safariが<canvas>タグをサポートしています。

注：IE 8 またはそれ以前のバージョンのIEブラウザは<canvas>タグをサポートしていません。

タグの定義及び使用説明

<canvas> タグはスクリプト（主にJavaScript）を使ってグラフ（例えばチャートや他の画像）を描画します。

<canvas> タグは図形容器であり、グラフィックを描画するにはスクリプトを使用する必要があります。

HTML <canvas> 要素は <body> タグ内に位置します。
<canvas> タグはグラフィックのコンテナであり、グラフィックを描画するにはスクリプトを使用する必要があります。スクリプトタグは、<canvas> タグの外に、キャンバススクリプトAPIやWebGL APIを持つ<script>タグを使用してすべてのグラフィックを描画します。

HTML 4.01 HTML5の間の違い

<canvas> タグは HTML5 に新しいタグがあります。

ヒントと注意

注：<canvas> 要素内のテキストは、<canvas> をサポートしていないブラウザで表示されます。

ヒント：キャンバスオブジェクトのすべての属性とメソッドについて詳しく知りたい場合は、以下を参照してくださいHTML キャンバスリファレンスマニュアル。

属性

New　: HTML5 に新しい属性があります。

属性	値	説明
heightHTML5	ピクセル	キャンバスの高さを指定します。
widthHTML5	ピクセル	キャンバスの幅を指定します。

グローバル属性

<canvas> タグのサポート HTMLのグローバル属性。

イベント属性

<canvas> タグのサポート HTMLのイベント属性。

HTML: <caption> タグ HTML: <button> タグ

HTML リファレンス マニュアル

HTML タグ 全集