HTML <canvas>タグ


その場で赤い長方形を描き、それを<canvas>要素内に表示します。

<canvas id="myCanvas">
Your browser does not support the canvas tag.
</canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>

以下の「自分で試してみてください」の例をもっと見てください。


定義と使用法

タグは、<canvas>スクリプト(通常はJavaScript)を介して、その場でグラフィックを描画するために使用されます。

タグは透明で、グラフィックの<canvas>コンテナにすぎません。実際にグラフィックを描画するには、スクリプトを使用する必要があります。

要素内のテキストは<canvas>、JavaScriptが無効になっているブラウザ、およびをサポートしていないブラウザで表示されます<canvas>


ヒントと注意

ヒント:<canvas>要素 の詳細については、HTMLCanvasチュートリアルをご覧ください。

ヒント:すべてのプロパティとメソッドの完全なリファレンスについては、 HTMLキャンバスリファレンスにアクセスしてください。


ブラウザのサポート

表の数字は、要素を完全にサポートする最初のブラウザバージョンを示しています。

Element
<canvas> 4.0 9.0 2.0 3.1 9.0

属性

Attribute Value Description
height pixels Specifies the height of the canvas. Default value is 150
width pixels Specifies the width of the canvas Default value is 300

グローバル属性

この<canvas>タグは、HTMLのグローバル属性もサポートしています。


イベント属性

この<canvas>タグは、HTMLのイベント属性もサポートしています。



その他の例

別の<canvas>の例:

<canvas id="myCanvas">
Your browser does not support the canvas tag.
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
//Turn transparency on
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script>

デフォルトのCSS設定

ほとんどのブラウザは<canvas>、次のデフォルト値で要素を表示します。

canvas {
  height: 150px;
  width: 300px;
}