パスを使用して HTML5 で円弧を描く Canvas_html5 チュートリアルのテクニック

この記事は、Steve Fulton & Jeff Fulton HTML5 Canvas、第 2 章「Advanced Path Methods, Arcs」から翻訳されたものです

キャンバス描画では、「円弧」は完全な円または円周の一部のいずれかになります。

コードをコピー

コードは次のとおりです:

context.arc()
context .arc(x, y, radius, startAngle, endAngle, anticlockwise)

上記のメソッドの説明では、x と y は円の中心を定義し、radius は円の半径を定義します。丸。 startAngle と endAngle は極座標値で表されます。反時計回り (ブール値) は円弧の方向を定義します。

たとえば、点 (100, 100) を中心として半径 20 の円を描きたい場合、次のコードを使用できます:

コードをコピーします

コードは次のとおりです:

context.arc(100, 100, 20, (Math.PI/180)* 0, (Math.PI/180) *360, false);

実行効果は次のとおりです:

上記のコードでは、(Math.PI/180) を乗算して開始角度 (0) と終了角度 (360) を極座標ラジアンに変換する必要があることに注意してください。開始角度が 0、終了角度が 360 の場合、完全な円になります。

完全な円に加えて、円弧セグメントを描くこともできます。次のコードは円の 4 分の 1 を描画します:

コードをコピーします

コードは次のとおりです:

context.arc(100, 100, 20, (Math.PI/180)*0, (Math.PI/180)*90, false);

上記の円弧に加えてさらに円の 4 分の 3 を描きたい場合は、反時計回りに true を設定します。

コードをコピー

コードは次のとおりです:

context.arc(100, 100, 20, (Math.PI/180)*0, (Math.PI/180)* 90 、真);

翻訳注 1: Canvas 座標系では、Y 軸の方向は下になります。

注釈 2: context.arcTo() メソッドを使用して円弧を描くこともできます。 Steve Fulton と Jeff Fulton によるオリジナルの HTML5 Canvas 本のこのメソッドの説明は完全に間違っています。 arcTo() の正しい概要については、 曲線 の arcTo を参照してください。