JAVASCRIPT PROGRAM

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

キャンバスに円弧を描画しよう

前回は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番目の引数は不要です。

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

figure4-1

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

-JAVASCRIPT, PROGRAM