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

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

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

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

コードをコピーします

コードは次のとおりです:

基本的な HTML タグのすべての属性があり、スタイルを設定することもできます。

コードをコピー

コードは次のとおりです:

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

コードをコピー

コードは次のとおりです:

ここの高さと幅htmlタグの属性が異なり、スタイルの高さと幅も異なります。 これは主にキャンバス内の座標範囲を指します。スタイルの幅と高さは、キャンバスの実際の表示サイズを指します。

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

コードをコピーします

コードは次のとおりです:

次に、座標 100 と 50、サイズ 200 と 150 の長方形をキャンバスに描画します。以下に示すように、実際の効果が表示されます。

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

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

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

コードをコピー

コードは次のとおりです。

<script><br />var context =document.getElementsByTagName("canvas")[0].getContext("2d");<br />context.fillRect(100,50,200,150);<br /></スクリプト><br /><br /><br /></script>

Canvas には他にもいくつかの属性がありますが、まだ見ていません。getContext() というメイン メソッドもあります。このメソッドは描画オブジェクトを取得します。

キャンバスの DOM オブジェクトを通じて、getContext("2d") メソッドを呼び出して、対応する描画オブジェクトを取得できます。

var Canvas = document.getElementsByTagName("canvas")[0];
var context = Canvas.getContext("2d");
この drawing2d のプロパティとプロパティは開発者コンソールで確認できます。メソッド:

fillStyle、stokeStyle、lineCap、font およびその他のブラシ スタイル クラス、fillRect、strokeRect、beginPath、moveTo、lineTo、closePath、ストローク、fill、drawImage およびその他の描画アクション メソッド、およびその他の transfrom、save の属性が含まれます。およびその他の方法。

私がこれまでに見たいくつかの属性とメソッドについて簡単に説明します。

その他については、自分で調べる必要があります。

fillStyle: 塗りつぶしスタイル。red: #ff0000 などの色の値の HTML コードにすることができます。CSS3 の他の属性がサポートされているかどうかはわかりません

ストロークスタイル: 線のスタイル

フォント: フォント スタイル

fillRect: function(x,y,width,height)、fillStyle

に従って四角形を直接塗りつぶします。

ストロークRect:関数(x、y、幅、高さ)、直接ストロークスタイルを押して長方形の辺を描画します

beginPath: 線の描画を開始し、moveTolineToclosePath などを使用してポリラインまたはポリゴンを描画します

moveTo: function(x,y) は線の始点を新しい座標に移動します

lineTo:function(x,y) は現在の点からターゲット点を描画します

closePath: 現在のポイントから開始点に接続します

ストローク: 上記のパスに従って、ストロークスタイルに従ってポリラインを描画します

fill: 上記のパスに従って、fillStyle に従って長方形を描画します

drawImage: function(image,x,y,width,height) は、Image オブジェクトをキャンバスに追加します。ここでの画像オブジェクトはロードされている必要があることに注意してください。 var img = new Image();img.src="test.png";img.onload = function() など{/*ここで画像をキャンバスに追加できます*/}

上記の四角形を描画する方法を確認できます:

コードをコピーします

コードは次のとおりです:

context.fillRect(100,50,200,150);

ポリラインを描画します:

コードをコピーします

コードは次のとおりです:

context.beginPath();
context.moveTo(10,10);
context.lineTo(10,110);
context.lineTo(110,110);
context.lineTo(110,10) );
context.closePath();
context.ストローク();

Canvasには描画機能はありますが、ユーザーインタラクションには弱いようです。 Silverlight キャンバス、.NET ビットマップ、HTML div、およびキャンバスを比較します:

個人的には、canvas のほうが Bitmap に近いと感じています。もちろん、Bitmap を使用してさらに多くの機能を実現できます。 Canvas 自体で実現できることはまだ比較的少ないですが、他の既存のブラウザ側アプリケーション テクノロジと組み合わせることで、より優れたアプリケーションを作成できることは間違いありません。