四角形を描画するには？
解説
Canvas上に四角形を描画するには、 strokeRect()メソッドを使います。
次の例は、左上隅の座標が(10, 20)、幅が30、高さが40の四角形を描きます。
context.strokeRect(10,20,30,40);
中身を塗りつぶした四角形を描画するには、fillRect()メソッドを使います。
context.fillRect(10,20,30,40);
四角形の中身を透明に戻すには、clearRect()メソッドを使います。
次の例では、塗りつぶした四角形の中身をくり抜いています。
context.fillRect(10,20,60,80);
context.clearRect(20,30,40,60);
rect()メソッドを使って四角形を表示することもできます。
strokeRect()メソッドやfillRect()メソッドは完結した四角形を描くのに対し、rect()メソッドは一連のパスの一部として四角形を描くところが異なります。
rect()メソッドの例は、「パスを使って図形を描画するには？」のページをご覧ください。
関連項目
Canvasとは
線の形状を設定するには？
パスを使って図形を描画するには？
