キャンバスに矩形を描画しよう
前回はcanvasに三角形を描くプログラムを作りました。
今回はcanvasに矩形(四角形)を描くプログラムを作ってみましょう。
三角形の描画はいくつかのメソッドを組み合わせなければならなかったので少し面倒でしたが、矩形の描画はfillRect()メソッドかstrokeRect()メソッドを使うだけなので非常に簡単です。
矩形描画メソッドの使い方
fillRect()メソッドは、矩形を塗りつぶして描画します。
オブジェクト.fillRect(X座標, Y座標, 幅, 高さ)
strokeRect()メソッドは、矩形の輪郭を描画します。
オブジェクト.strokeRect(X座標, Y座標, 幅, 高さ)
キャンバスに矩形を描くプログラム
キャンバスに矩形を描くプログラムは、以下のようになります。
このプログラムでは、rect()という関数を作って矩形の描画処理をまとめています。
6番目の引数は"fill"にすると矩形を塗りつぶし、"stroke"にすると矩形の輪郭で表示します。
また、7番目の引数で矩形の色を、8番目の引数で輪郭の太さを指定できるようにしています。
なお、矩形を塗りつぶす場合は、8番目の引数は不要です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Rectangle</title> </head> <body onload="strDraw();"> <canvas id="pos" width="400" height="400"></canvas> <script type="text/javascript"> // 矩形表示関数 function rect(fig,x,y,width,height,mode,color,thick) { // 塗りつぶし if (mode == "fill") { fig.fillStyle = color; // 塗りつぶす色 fig.fillRect(x,y,width,height); // 矩形を描画 // 矩形描画 } else if (mode == "stroke") { fig.lineWidth = thick; // 線の太さ fig.strokeStyle = color; // 線の色 fig.strokeRect(x,y,width,height); // 輪郭を描画 } } // 開始関数 function strDraw() { // ドキュメントオブジェクト作成 var id1 = document.getElementById('pos'); // 2Dオブジェクト作成 var fig = id1.getContext('2d'); // 矩形描画 rect(fig, 20, 20,180,180,"fill", "black"); rect(fig,220,110,180, 90,"fill", "red"); rect(fig, 75,235, 80,160,"stroke","green",5); rect(fig,240,240,140,140,"stroke","blue" ,10); } </script> </body> </html> |
プログラムを実行すると、WEBブラウザ上に4つの矩形が表示されます。
canvasに図形を描く詳しいやり方は、以下の「MDN Web Docs」を参照してください。