HTML <canvas> タグ

定義と使用方法

<canvas> タグは通常、スクリプト（主にJavaScript）を使用してリアルタイムでグラフを描画します。

<canvas> タグは透明です。それはただのグラフの容器であり、実際にグラフを描画するにはスクリプトを使用する必要があります。

JavaScriptを無効にしたブラウザやcanvasタグをサポートしないブラウザでは <canvas> のブラウザでは、以下が表示されます <canvas> 要素内のすべてのテキスト。

ヒント

HTML Canvasのチュートリアルで、以下について学んでください <canvas> 要素に関する詳細情報を訪れてください。

すべての属性とメソッドの完全なリファレンスを確認するには、私たちの HTML Canvas リファレンスマニュアル。

インスタンス

例1

赤い矩形をリアルタイムで描画し、<canvas>要素に表示します：

<canvas id="myCanvas">
あなたのブラウザはcanvasタグをサポートしていません。
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>

自分で試してみてください

例2

別の<canvas>の例：

<canvas id="myCanvas">
あなたのブラウザはcanvasタグをサポートしていません。
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
// 透明度を開ける
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script>

自分で試してみてください

属性

属性 値 説明
height ピクセル値 キャンバスの高さを指定します。デフォルト値は150です。
width ピクセル値 キャンバスの幅を指定します。デフォルト値は300です。

グローバル属性

<canvas> タグは以下をサポートしています HTML内のグローバル属性。

イベント属性

<canvas> タグは以下をサポートしています HTML内のイベント属性。

デフォルトのCSS設定

ほとんどのブラウザは以下のデフォルト値で表示します <canvas> 要素：

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

自分で試してみてください

canvasの歴史

このHTML要素はクライアントのベクトルグラフィックのため設計されています。自身には行動がありませんが、クライアントのJavaScriptに描画APIを提供し、スクリプトが描きたいものをキャンバスに描画できるようにします。

<canvas> タグは Apple が Safari 1.3 Web ブラウザで導入しました。HTMLに対するこの基本的な拡張の理由は、Safariでの HTML の描画能力が Mac OS X デスクトップの Dashboard コンポーネントでも使用されており、Appleは Dashboardでスクリプト化されたグラフィックをサポートする方法を望んでいたからです。

Firefox 1.5 と Opera 9 は Safari を追従しました。これらのブラウザはどちらも <canvas> タグをサポートしています。

IEで<canvas>タグを使用し、IEのVMLサポートに基づいてオープンソースのJavaScriptコード（Googleが主導）で互換性のあるキャンバスを構築することができます。 参照：http://excanvas.sourceforge.net/。

<canvas> の標準化の取り組みは、非公式なウェブブラウザメーカーの協会によって推進されています。現在、<canvas> は HTML5 草案の公式タグとして認められています。 参照：http://www.whatwg.org/specs/web-apps/current-work/

<canvas> タグと SVG、VMLの違い

<canvas> タグと SVG、VMLの重要な違いは、<canvas> が JavaScript ベースの描画 API を持っているのに対し、SVG と VML は XML ドキュメントを使用して描画を記述することです。

これらの方法は機能的には同等であり、どちらも互いにシミュレートできます。見た目では非常に異なりますが、それぞれの方法には長所と短所があります。例えば、SVG 描画は要素をその記述から削除することで簡単に編集できます。

同一の図形の <canvas> タグから要素を削除するには、しばしば描画を消去して再描画する必要があります。

どうすれば <canvas> タグを使って描画を行うか

大多数の Canvas 描画 API は <canvas> 要素自身に定義されていません。代わりに、画布を操作する getContext() メソッド「描画環境」オブジェクトが取得されます。

Canvas API もパスの表現法を使用しています。ただし、パスは beginPath() と arc() メソッドなどのメソッドコールの連続で定義され、アルファベットと数字の文字列として記述されるのではなく定義されています。

パスが定義されると、fill()などの他のメソッドはそのパスに対して操作を行います。fillStyleなどの描画環境の属性は、これらの操作がどのように使用されるかを説明しています。

注：Canvas API が非常にコンパクトである理由の一つは、テキストの描画にはサポートが提供されていないことです。テキストを <canvas> グラフィックに追加するには、ビットマップ画像と結合して自分自身で描画するか、または <canvas> 上に CSS ポジションを使用して HTML テキストを覆う必要があります。

ブラウザのサポート

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 2.0 3.1 9.0