スポンサーリンク

描画-四角形

四角形を書く

四角形を書くための命令があります。プログラムを見ていきましょう。

ブラウザで表示すると3つの四角形が書かれます。


四角形を書く命令が「rect」です。引数は次の様に左上座標と横、縦のサイズをピクセル値で指定します。

塗りつぶし

四角形内を塗りつぶします。次のように28行目、30行目を変更しブラウザで表示してください。

「strokeStyle」命令の代わり記述した28行目の「fillStyle」は塗りつぶす色を指定します。

「stroke()」命令の代わり記述した30行目の「fill()」は塗りつぶしを実行する命令です。

シンプルな記述方法

もっと短いコードで四角形を書くことができます。「beginPath()」、「closePath()」を記述せず、「rect()」と「stroke()」命令を一つにした「strokeRect()」を利用します。

塗りつぶしも同様に「fillRect()」命令があります。


四角形の描画ができました。次に円を書いていきましょう。

タイトルとURLをコピーしました