最新のWeb開発のチュートリアル
 

HTML <canvas> Tag


その場で、赤色の四角形を描画し、内側にそれを示す<canvas>要素:

<canvas id="myCanvas"></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> 4.0 9.0 2.0 3.1 9.0

HTML 4.01とHTML5の違い

<canvas>タグは、HTML5で新しく追加されました。


ヒントと注意事項

注意:内部の任意のテキスト<canvas>要素をサポートしていないブラウザで表示されます<canvas>

ヒント:詳細情報<canvas>私たちの中の要素のHTMLキャンバスのチュートリアルを

ヒント:キャンバスオブジェクトで使用できるすべてのプロパティとメソッドの完全なリファレンスについては、当社に行くHTMLキャンバスリファレンス


属性

= HTML5で追加。

属性 説明
height pixels キャンバスの高さを指定します
width pixels キャンバスの幅を指定します

グローバル属性

<canvas>タグもサポートし、グローバルは、HTMLの属性


イベント属性

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


デフォルトのCSS設定

なし。