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;
}