HTML Canvas チュートリアル

HTML Canvas とは？

HTML <canvas> 要素は、スクリプト（通常はJavaScript）を介して、その場でグラフィックを描画するために使用します。

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

Canvas には、パス、ボックス、円、テキストを描画し、画像を追加するためのいくつかのメソッドがあります。

ブラウザ・サポート

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

HTML Canvas はテキストを描画できる

Canvas は、アニメ付き、アニメなし双方のカラフルなテキストを描画できます。

HTML Canvas はグラフィックを描画できる

Canvas には、グラフやチャート画像を使用したグラフィカルなデータ・プレゼンテーションのための優れた機能があります。

HTML Canvas はアニメーションできる

Canvas オブジェクトは移動できます。簡単なボールのバウンドから複雑なアニメーションまで、あらゆることが可能です。

HTML Canvas はインタラクティブが可能

Canvas は、JavaScript イベントに応答することができます。

Canvas は、ユーザの操作（キー・クリック、マウス・クリック、ボタンク・リック、指の動き）に応答することができます。

HTML Canvas はゲームで使用できる

Canvas のアニメーションのメソッドは、HTML ゲーム・アプリケーション用の多くの可能性を提供します。

Canvas の例

HTML における <canvas> 要素は、次のように指定します：

<canvas> 要素は id 属性を持たなければならないので、JavaScript で参照することができます。

width と height 属性は、キャンバスのサイズを定義するために必要です。

チップ: 1 つの HTML ページに複数の <canvas> 要素を持つことができます。

ボーダーを追加するには、style 属性を使用します：

次の章では、キャンバスへの描画方法を示します。