JAVASCRIPT PROGRAM

JavaScriptでキャンバスに矩形を描画しよう【初心者向け】

キャンバスに矩形を描画しよう

前回はcanvasに三角形を描くプログラムを作りました。
今回はcanvasに矩形(四角形)を描くプログラムを作ってみましょう。
三角形の描画はいくつかのメソッドを組み合わせなければならなかったので少し面倒でしたが、矩形の描画はfillRect()メソッドかstrokeRect()メソッドを使うだけなので非常に簡単です。

矩形描画メソッドの使い方

fillRect()メソッドは、矩形を塗りつぶして描画します。

オブジェクト.fillRect(X座標, Y座標, 幅, 高さ)

strokeRect()メソッドは、矩形の輪郭を描画します。

オブジェクト.strokeRect(X座標, Y座標, 幅, 高さ)

キャンバスに矩形を描くプログラム

キャンバスに矩形を描くプログラムは、以下のようになります。
このプログラムでは、rect()という関数を作って矩形の描画処理をまとめています。
5番目の引数は"fill"にすると矩形を塗りつぶし、"stroke"にすると矩形の輪郭で表示します。
また、6番目の引数で矩形の色を、7番目の引数で輪郭の太さを指定できるようにしています。
なお、矩形を塗りつぶす場合は、7番目の引数は不要です。

プログラムを実行すると、WEBブラウザ上に4つの矩形が表示されます。

figure3-1

canvasに図形を描く詳しいやり方は、以下の「MDN Web Docs」を参照してください。

-JAVASCRIPT, PROGRAM