HTML5キャンバスで長方形インスタンスを描画します

この記事では、主にHTML5キャンバスで長方形を描く例を紹介します。この記事では、3つのAPIを使用しています。FillRect、Strokerect、ClearRect。それを必要とする友達はそれを参照できます。

この記事は、Steve Fulton＆Jeff Fulton HTML5 Canvas、第2章、基本的な長方形の形状から翻訳されています。

キャンバスに組み込まれたシンプルな幾何学的な形状を見てみましょう。長方形を描きます。キャンバスには、長方形を描くには3つの方法があります：fillrect、stroke（strokenect）、およびclearrect。もちろん、パスを使用して、長方形を含むすべての人物を描くこともできます。

上記の3つの方法のAPIは次のとおりです。

1.FillRect（x、y、幅、高さ）。 （x、y）、幅、高さから始まる固体長方形を描きます。

2.ストーカー（x、y、幅、高さ）。 （x、y）、幅、高さから始まる長方形のボックスを描きます。長方形のボックスは、現在のセットStrokestyle、LineWidth、LineJoin、MiterLimitプロパティに応じて、さまざまなスタイルにレンダリングされます。

3.ClearRect（x、y、幅、高さ）。 （x、y）、幅、高さから始まる長方形の領域をクリアし、完全に透明にします。

上記の方法を呼び出してキャンバスを描く前に、塗りつぶしとストロークのスタイルを設定する必要があります。これらのスタイルを設定する最も基本的な方法は、24ビットの色を使用することです（16進列で示されています）。簡単な例を次に示します。