HTML5 - Canvas - 四角形

四角形の描画

キャンバスに四角形を描画します。ここで説明するものは呼び出された時点で、直ちに描画されるので、beginPathメソッドやstrokeメソッドなどが必要ありません。また、それぞれの引数は以下のようになっています。左から、座標(x, y)、widthは横幅、heightは縦幅となっています。

// 塗りつぶされた四角形の描画
	fillRect(x, y, width, height);

// 四角形の枠線の描画
	strokeRect(x, y, width, height);

// 指定された四角形の内部を消去
	clearRect(x, y, width, height);

サンプル

サンプルコードを見ると、どれもbeginPathメソッドやstrokeメソッド、fillメソッドを使っていないことが分かります。またclearRectメソッドは、下段の塗りつぶされた四角形の右下に配置され、四角形の一部を消去していることが分かります。

// 黒で塗りつぶされた四角形の描画（左上）
	cx.fillRect(20, 20, 100, 100);

// 枠線のみの四角形の描画（右上）
	cx.strokeRect(180, 20, 100, 100);

// 四角形の内部を削除し、透明とする（下段中央）
	cx.fillRect(100, 160, 100, 100);
	cx.clearRect(150, 200, 100, 100);