html5のcanvas要素の使い方紹介（四角形・ポリライン・円の描画）_html5チュートリアルスキル

Canvas は一般的にキャンバスのことを指します。最近、HTML5 を使用してゲームを作成することに興味を持っているので、単純に Canvas を使用しました。

Silverlight と wpf で Canvas を使用したことがあります。Silverlight では、Canvas は絶対配置コンテナーであり、その中に任意のコントロールを配置できます。彼を通じて、キャンバス、グラフィック アプリケーション、GIS アプリケーションなどを構築できます。

HTML5 では、キャンバスは新しいタグです:

彼には特定の属性もあります:

たとえば、次のキャンバスを定義します。

画像内のキャンバスのサイズはスタイル 600px * 450px で決まりますが、キャンバス全体を埋める座標は括弧内のサイズに対応する 400*300 のみです。

キャンバスでの描画は座標に基づいているため、100、50の座標は150px、75pxの画面座標に変換され、長方形のサイズも200*150から300px*225pxの画面サイズに変換されます。

以下のコードに従って、自分で試すことができます: