この記事では、キャンバスに長方形と円を描く方法について説明します。それらは基本的なグラフィックに属します。もちろん、基本的なグラフィックには単なるものではありませんが、キャンバスでは、長方形と円のみを描くだけでは他のシミュレーションを必要としません。
キャンバスは長方形を描きます1。充填とストラークFillRectは長方形を直接埋めることができ、充填スタイルは現在設定しているスタイルです。同様に、ストラークは長方形を直接ストロークすることです
それらのパラメーターは一貫しています（開始点x座標、開始点y、長方形の幅、長方形の高さ）。ここの出発点は、長方形の左上隅のポイントを指します。
私たちは通常、それらを使用して単純なことを行い、単純なことしかできません。なぜ？彼らが描くグラフィックには道がないという言葉は、直接出てきました。
たとえば、最初に長方形をfillrectで埋める場合は、長方形をストロークする必要があります。 stroke（）を使用する場合、現時点では長方形がありますが、パスがないため、効果はありません。
この長方形をストロークしたい場合は、Strokerect（）を使用して同じ位置で長方形をストロークできますが、実際には独立していて、単に重複しています。
ctx.fillrect（200,100,50,40）;
CTX.Strokerect（200,100,50,40）;
満たされた長方形が必要な場合は、fillrectとstrokerectを同時に使用することは間違いなく面倒です。したがって、この場合、通常、次の方法を使用します。
2、長方rectのパラメーターは、fillrectやストラークと変わりません。違いは、彼らが道を描くだけであり、あなたはストロークを完了するか、後で自分自身を満たさなければならないことです。CTX.RECT（300,100,50,40）;
ctx.stroke（）
ctx.fill（）;
これを行うことの利点は何ですか？前の記事では、充填または脳卒中は多くのリソースを消費するため、（ループなど）が一度に何百ものパスを描画し、その後ストロークまたは充填する必要があることがよくあると述べました。この時点で、rectを使用してパスを描いてから再び埋めることで、充填とストロークの充填またはストロークの問題を毎回回避します。
3。リネートもちろん、描画線に関する私のチュートリアルのような長方形を描く4つのLinestoを使用することもできます。しかし、これは不要です。詳細については、その記事をご覧ください。
キャンバスは円を描きます空には目がありません。実際、Canvasには、円を直接描くことができる実際の関数はありません。彼が描くのは、実際には360度の弧で、円のように見えます。以前にアークを描くキャンバスの機能、つまりアークについて言及しました。私たちはそれを使用して円を描きます：
ctx.arc（300+25,100+20,20,0、math.pi*2）;
ctx.stroke（）
ctx.fill（）;
このアークはrectと同じであり、パスが描画され、充填またはストロークを後で完了する必要があります。
ただし、円の位置判断は長方形の位置とは異なることに注意する必要があります。長方形の左上隅が出発点としてその位置を決定しますが、通常、円の中心を持つ円の位置を決定します。
水平および垂直に中心にある長方形と円のセットを描きたい場合は、長方形の出発点を円の出発点と見なさないことを覚えておく必要があります - 円の開始点は円の中心です！
それを忘れてください、私はあなたに今あなたに整列された円と長方形を整列させた方がいいですか、円の中心の座標=長方形の幅と長方形の幅と高さの半分の座標。
つまり、円x =長方形x +長方形幅/2の中心、円y =長方形y +長方形の高さ/2です。このようにして、それらは絶対に整合しています。
ARCはサークルを直接描画する方法ほど使いやすいものではありませんが、直接描画サークルを直接描画する方法は、3つのパラメーター、つまり円の中心座標、つまり半径だけでなく、円を描くだけでなく、より強力で使用できます。
円があるので、楕円があるはずですが、楕円は言うまでもなく、キャンバスに円を描くための通常の機能すらありません。したがって、楕円を描画することは、他の方法を使用してシミュレートする必要があります。これは非常に複雑なので、次のステップに任せます。