HTMLCanvasチュートリアル

HTMLの<canvas>要素は、Webページにグラフィックを描画するために使用されます。

上の図は<canvas>で作成されています。

これは、赤い長方形、グラデーションの長方形、多色の長方形、および多色のテキストの4つの要素を示しています。

HTML Canvasとは何ですか？

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

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

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

ブラウザのサポート

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

HTMLキャンバスはテキストを描画できます

Canvasは、アニメーションの有無にかかわらず、カラフルなテキストを描画できます。

HTMLキャンバスはグラフィックを描画できます

Canvasには、グラフやチャートの画像を使用したグラフィカルなデータ表示のための優れた機能があります。

HTMLキャンバスをアニメーション化できます

キャンバスオブジェクトは移動できます。単純なバウンドボールから複雑なアニメーションまで、すべてが可能です。

HTMLキャンバスはインタラクティブにすることができます

CanvasはJavaScriptイベントに応答できます。

Canvasは、あらゆるユーザーアクション（キークリック、マウスクリック、ボタンクリック、指の動き）に応答できます。

HTMLキャンバスはゲームで使用できます

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

キャンバスの例

HTMLでは、<canvas>要素は次のようになります。

<canvas>要素にはid属性が必要です。これにより、JavaScriptで参照できるようになります。

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

ヒント： 1つのHTMLページに複数の<canvas>要素を含めることができます。

境界線を追加するには、スタイル属性を使用します。

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