フォーラム | 最新のWeb開発のチュートリアル
 

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


お使いのブラウザはサポートしていない<canvas>要素を。

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

左のグラフィックが使用して作成された<canvas> 。 赤い長方形、グラデーションの四角形、多色矩形、多色テキスト:それは四つの要素を示しています。


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

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

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

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


ブラウザのサポート

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

素子
<canvas> 4.0 9.0 2.0 3.1 9.0

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

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


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

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


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

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


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

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

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


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

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


キャンバス例

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

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

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

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

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

デフォルトでは、 <canvas>要素には境界線とコンテンツがありません。

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

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
»それを自分で試してみてください

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


Hi Traveller Fashion Tomorrow Startups Daily News Fit Science Amazing Baby Yup This is Japan Take Film Art In Life