html5 Canvas描画チュートリアル(5)—canvas_html5チュートリアルスキルで曲線を描く円弧法

この記事 キャンバスに線を描く では、直線を描く方法について説明しました。曲線を描くことに関するこの記事は、論理的にはずっと前に公開されるべきでしたが、キャンバス上で曲線を描くことは非常に特殊であるため、まだ公開していません。まだ理解できていないので、段階的に試してください。
キャンバスで曲線を描くときの難しさの 1 つは、曲線に対応する関数が 4 つしかないことです。それらは、arc、arcTo、quadraticCurveTo、bezierCurveTo です。最も単純な arc メソッドから始めましょう。
円弧の機能は、完全な円または円の特定の円弧である通常の円弧を描くことです。 arc の構文は次のとおりです。 🎜>

context.arc(x, y, radius, startAngle, endAngle, anticlockwise)
そのパラメーターについて説明します。
円弧(円の中心x、円の中心y、半径、開始角度、終了角度、反時計回りかどうか)

コードをコピーします


コード


ctx.arc(400,400,20,0,Math.PI*2); ctx.stroking(); >
lineTo と同様に、arc も描画パスなので、グラフィックスを表示するにはその背後にある fill メソッドまたはストローク メソッドを呼び出す必要があります (画像では赤いストロークスタイルと半透明の赤い fillStyle が使用されています)。


ctx.arc(400,400, 20,0 ,Math.PI*2/4);

図から、円弧の 0 度は数学で一般的に使用される 0 度であると判断できます。ですが、角度はデフォルトで時針が開いており、数学的モデルとは反対になります (キャンバスの座標も数学的座標の反対であるため、これは座標に関連しています)。
ctx.arc(400,400, 20,0 ,Math.PI*2/4,true);




角度が反時計回りになり、円弧が 360 -90 になることがわかります。 =270度。
コードは次のとおりです:

ctx.arc(400,400, 20,Math .PI*2/4,Math.PI*2 Math.PI);


開始点が 90 度で、終了点も 90 度の場合、結果は何もありません。が描けるので終点を置き角度を180度に変更して最終的に下のグラフが得られました。


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

ctx.arc(400,400,20,Math.PI*2/4,Math.PI*2 Math.PI*2/4); /開始点は 90 度、終了点は 360 90 度

しかし、このアプローチはトラブルを探しているだけであり、普通の人は使用しません。
概要: Canvas の arc メソッドは正の円弧を描く方法であり、S 字などの他の奇妙な円弧は描くことができません。ただし、私は S 字が一番好きです。 -形。