HTMLキャンバスチュートリアル

HTMLキャンバスとは何ですか？

HTML <canvas>要素は、スクリプトを経由して、オンザフライで、グラフィックスを描画するために使用される(usually JavaScript)

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

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

ブラウザのサポート

表中の数字は完全にサポートする最初のブラウザのバージョンを指定<canvas>要素を。

HTMLキャンバスは、テキストを描画することができます

キャンバスとやアニメーションなしで、カラフルなテキストを描画することができます。

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

キャンバスはグラフやチャートの画像とグラフィックデータのプレゼンテーションのための優れた機能を持っています。

HTMLキャンバスをアニメーションすることができ

キャンバスオブジェクトを移動することができます。 すべてが可能です：単純な弾むボールから複雑なアニメーションに。

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

キャンバスには、JavaScriptのイベントに応答することができます。

キャンバスは、任意のユーザーアクション（キークリック、マウスのクリック、ボタンのクリック、指の動き）に対応することができます。

HTMLキャンバスは、ゲーム内で使用することができます

アニメーションのためのキャンバス」の方法は、HTMLのゲームアプリケーションのための多くの可能性を提供します。

キャンバス例

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

<canvas>それではJavaScriptによって参照できるように、要素は、id属性を持っている必要があります。

幅と高さ属性は、キャンバスのサイズを定義する必要があります。

Tip:あなたは複数持つことができ<canvas> 1つのHTMLページの要素を。

境界線を追加するには、style属性を使用します。

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