JavaScriptで、canvasに円弧や円を描くのと、角度（ラジアンの計算）

構文は以下のとおり。 arc(x, y, radius, startAngle, endAngle, anticlockwise) x,yが円の中心 radiusは半径 startAngleが開始角度。X軸方向が0度。 endAngleが終了角度。 anticlockwiseは方向（デフォルトは時計回り） startAngleとendAngleに使う角度は「度」ではなくてラジアン。 度からラジアンに変換するには radians = 度数 ÷ 180 × Math.PIとする。 例えば30度なら、Math.PI/180*30で計算できる。 0度～360度までの円を描くには。360度はMath.PI/180*360なので2*Math.PIで表せる。ctx.fillで円の中を塗りつぶす。

See the Pen canvas-circle1 by Takuma Endo (@pghappy) on CodePen.

塗りつぶさない円を書くにはfillではなくてstrokeを使う。

See the Pen Untitled by Takuma Endo (@pghappy) on CodePen.

ピザのような円弧を書くには。

See the Pen canvas-circle3 by Takuma Endo (@pghappy) on CodePen.

まず円の中心にペンを持ってくる必要があるのでmoveToが必要。この行を消すと円弧の始点と終点を結んだだけの描画になっちゃう。 円の中心からの描画とすることでちゃんと扇のような形になってくれる。

---

プログラミング学習を体系的に進めたい人へ

独学で基礎を確認したあとに、質問できる環境や転職・副業向けの学習サポートも比べたい人は、プログラミングスクールの比較記事も参考にしてください。学習目的、料金、受講期間、サポート範囲を分けて見ると、自分に合う学び方を選びやすくなります。

• プログラミングスクール総合ランキング
• プログラミングスクール一覧
• プログラミング独学の進め方