HTML Canvas チュートリアル

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

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

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

HTML Canvasとは何ですか？

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

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

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

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

Canvasは、色のテキストを描画し、アニメーション効果も加えることができます。

HTML Canvasはグラフを描画できます

Canvasは、グラフやチャートを使用してデータを視覚的に表示するための強力な機能を持ちます。

HTML Canvasはアニメーション化できます

Canvasオブジェクトは移動できます。何ができるか：シンプルなボールのジャンプから複雑なアニメーションまで。

HTML Canvasはインタラクティブ

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

Canvasは、ユーザーの操作（キーボードクリック、マウスクリック、ボタンクリック、指の移動）に反応できます。

HTML Canvasはゲームに使用できます

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

Canvas Example

HTMLでは、<canvas> 要素は以下のように見えます：

<canvas id="myCanvas" width="200" height="100"></canvas>

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

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

ヒント：HTMLページには複数の <canvas> 要素が存在できます。

デフォルトでは、<canvas> 要素には枠も内容もありません。

枠を追加するには、style属性を使用してください：

例

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

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

次の章では、キャンバス上で描画する方法について説明します。

参照もどうぞ：

CodeW3C.comの完全なCanvasリファレンスマニュアル

ブラウザのサポート

<canvas> 要素は HTML5 標準（2014年）です。

すべての現代ブラウザは <canvas> をサポートしています：