キャンバスに円弧を描画しよう
前回はcanvasに矩形(四角形)を描くプログラムを作りました。
今回はcanvasに円や半円を描くプログラムを作ってみましょう。
円を描画するやり方は、三角形を描画するやり方に似ています。
canvasに円を描く手順は、以下のようになります。
円を描く手順
- beginPath()メソッドを使って、パスを作成する
- arc()メソッドを使って、円の中心座標、半径、円周の開始角度、終了角度を指定する
- closePath()メソッドを使って、開始した座標と最後の座標を接続する
- fill()メソッドかstroke()メソッドを使って、円を表示する
円弧メソッドの使い方
円弧の描画は、arc()メソッドを使います。
オブジェクト.arc(X座標, Y座標, 半径, 開始角度, 終了角度, 方向)
X座標とY座標は円弧の中心座標です。
開始角度と終了角度はX軸を基準に計算して、単位はラジアンを使います。
1ラジアンは180/π(3.14...)で約57°なので、開始角度を0にした場合、終了角度にπを指定すると半円に、2πを指定すると円になります。
JavaScriptでπを表現するには、Math.PIを使います。
方向は、trueを指定すると反時計回りに、falseを指定すると時計回りに円弧を描きます。デフォルトはfalseです
キャンバスに円を描くプログラム
キャンバスに円または半円を描くプログラムは、以下のようになります。
このプログラムでは、circle()という関数を作って円の描画処理をまとめています。
7番目の引数は"fill"にすると円を塗りつぶし、"stroke"にすると円を線で表示します。
また、8番目の引数で円の色を、9番目の引数で円周の太さを指定できるようにしています。
なお、円を塗りつぶす場合は、9番目の引数は不要です。
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 44 45 46 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Circle</title> </head> <body onload="strDraw();"> <canvas id="pos" width="400" height="400"></canvas> <script type="text/javascript"> // 円表示関数 function circle(fig,x,y,r,start,end,mode,color,thick) { fig.beginPath(); // 新しいパスを作成 fig.arc(x,y,r,start,end); // 円を描画 fig.closePath(); // パスの終了 // 塗りつぶし if (mode == "fill") { fig.fillStyle = color; // 塗りつぶす色 fig.fill(); // 輪郭描画 } else if (mode == "stroke") { fig.strokeStyle = color; // 線の色 fig.lineWidth = thick; // 線の太さ fig.stroke(); } } // 開始関数 function strDraw() { // ドキュメントオブジェクト作成 var id1 = document.getElementById('pos'); // 2Dオブジェクト作成 var fig = id1.getContext('2d'); // 円描画 circle(fig,100,100,80,0, Math.PI, "fill", "black"); circle(fig,300,100,80,0, Math.PI*2,"fill", "red"); circle(fig,100,300,80,Math.PI,Math.PI*2,"stroke","green", 5); circle(fig,300,300,80,0, Math.PI*2,"stroke","blue", 10); } </script> </body> </html> |
プログラムを実行すると、WEBブラウザ上に二つの円と二つ半円が表示されます。
canvasに図形を描く詳しいやり方は、以下の「MDN Web Docs」を参照してください。