HTML5 での四角形の描画例 Canvas_html5 チュートリアルのヒント

この記事は、Steve Fulton & Jeff Fulton HTML5 Canvas、第 2 章「The Basic Rectangle Shape」から翻訳されたものです。

Canvas に組み込まれた単純な幾何学的形状、つまり長方形の描画を見てみましょう。 Canvas では、四角形を描画する方法として、塗りつぶし (fillRect)、ストローク (StrokeRect)、クリア (clearRect) の 3 つの方法があります。もちろん、「パス」を使用して四角形を含むすべてのグラフィックスを記述することもできます。

上記 3 つのメソッドの API は次のとおりです。

1.fillRect(x,y,width,height)。 (x, y) から始まり、幅 width と高さ height を指定して実線の長方形を描画します。
2.ストロークRect(x,y,幅,高さ)。幅を幅、高さを高さとして、(x, y) から始まる長方形のボックスを描画します。長方形のボックスは、現在設定されているストロークスタイル、ライン幅、ラインジョイン、およびマイターリミットのプロパティに従って、さまざまなスタイルでレンダリングされます。
3.clearRect(x,y,width,height)。 (x,y)から始まる幅widthと高さの長方形の領域をクリアして完全に透明にします。

上記のメソッドを呼び出してキャンバスを描画する前に、塗りつぶしとストロークのスタイルを設定する必要があります。これらのスタイルを設定する最も基本的な方法は、24 ビット カラー (16 進文字列として表される) を使用することです。以下は簡単な例です:

コードをコピーします

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

context.fillStyle = "#000000";
context.drawingStyle = "#ff00ff";

以下の例では、塗りつぶしの色が黒に設定され、ストロークの色が設定されています紫色へ:

コードをコピー

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

functiondrawScreen( ) {
context.fillStyle = "#000000";
context.drawingStyle = "#ff00ff";
context.lineWidth = 2;
context.fillRect(10, 10, 40, 40) ;
context .strokingRect(0, 0, 60, 60);
context.clearRect(20, 20, 20, 20);
}

コードの実行結果以下に示すとおりです: