html5 キャンバス描画チュートリアル (9) — Canvas_html5 チュートリアルのスキルで四角形と円を描画する

この記事では、キャンバスに四角形と円を描く方法について説明します。これらは基本的なグラフィックスです。もちろん、これら以外にも基本的なグラフィックスはありますが、キャンバスでは、他の方法を使用せずに四角形と円を描画することしかできません。

Canvas は長方形を描画します
1、fillRect およびストロークRect
fillRect は長方形を直接塗りつぶすことができ、塗りつぶしスタイルは現在設定されているスタイルです。同じストロークRectの原理は、長方形
を直接ストロークすることです。それらのパラメータは、順番に一貫しています(開始点x座標、開始点y、長方形の幅、長方形の高さ)。ここでの開始点は、長方形の左上隅を指します。
私たちは通常、単純なことを行うためにそれらを使用しますが、彼らは単純なことしか実行できません。なぜ？彼らが描いたグラフィックには「パス」がないので、それがそのまま出てきました。
たとえば、最初に fillRect で四角形を塗りつぶし、次にその四角形をストロークする場合、ストローク() を使用しても効果はありません。四角形はあってもパスがないためです。
この四角形をどうしてもストロークしたい場合は、ストロークRect() を使用して同じ位置に四角形をストロークできます。ただし、これらは実際には独立しており、位置が重なっているだけです。

コードをコピーします

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

ctx.fillRect(200,100, 50,40 );
ctx.ストロークRect(200,100,50,40);

塗りつぶしとストロークの両方を含む四角形が必要な場合は、間違いなくfillRectとストロークRectを同時に使用します。面倒です。したがって、この場合、通常は次の方法を使用します。

2、rect
rect のパラメータは、fillRect やストローク Rect と変わりません。違いは、ストロークまたは塗りつぶしに関しては、次のことを行う必要があることです。後で自分で完成させてください。

コードをコピーします

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

ctx.rect(300,100, 50,40 );
ctx.ストローク()
ctx.fill();

これを行う利点は何ですか?前の記事で、塗りつぶしやストロークは大量のリソースを消費することを述べました。そのため、多くの場合、一度に数百のパス (ループなど) を描画してから、それらをストロークしたり塗りつぶしたりする必要があります。このとき、rect を使用してパスを描画し、最後に塗りつぶしを行うことで、fillRect とストローク Rec が毎回塗りつぶしたりストロークしたりする必要があるという問題を回避できます。

3, lineTo
もちろん、私の線画チュートリアルのように 4 lineTo を使用して四角形を描くこともできます。ただし、これは必須ではありません。詳細については、その記事を参照してください。

Canvas は円を描きます
空には目はありません。実際には、Canvas が直接円を描く機能はありません。 360 度の円弧、円のように見えます。
円弧を描くキャンバスの機能、つまり円を描くために使用します:

コードをコピーします

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

ctx.arc(300 25,100 20,20,0,Math.PI*2); >ctx.fill();


この円弧は四角形と同じであり、パスも描画します。塗りつぶしまたはストロークは後で完了する必要があります。

ただし、円の位置判定は長方形の位置判定とは異なることに注意してください。位置を決定する開始点として長方形の左上隅を使用しますが、通常は円の位置を決定するために円の中心を使用します。
水平方向と垂直方向の中心にある四角形と円のセットを描画したい場合は、四角形の始点を円の始点とみなさないように注意する必要があります。円の始点は円の中心です。サークル！


忘れてください。整列した円と長方形の場合、円の中心の座標 = 長方形の座標、長方形の幅と高さの半分です。 つまり、円の中心 x = 長方形 x 長方形の幅 / 2、円 y = 長方形 y 長方形の高さ / 2 です。このようにして、それらは完全に整列されます。
円弧は円を直接描く方法ほど使いやすくはありませんが、私が考えた円を直接描く方法では 3 つのパラメータ、つまり円の中心の座標と半径だけが必要ですが、円弧は円だけでなく半円なども描くことができるので、より強力な機能が使えます。
円があるから楕円もあるはずですが、キャンバスには楕円どころか円を描く正規の関数すらありません。したがって、楕円の描画は他の方法でシミュレートする必要があります。これはさらに複雑なので、後で説明します。