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

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

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

円弧を使って完全な円を描く場合はどうすればよいでしょうか?パラメータに開始角度と終了角度があることに誰もが気づきました。開始角度が 0、終了角度が 360 の場合、それは完全な円ではないでしょうか。

正解です！ただし、ここでの角度は「ラジアン」で表されることに注意してください (Flash の場合も同様です)。完全な円は 360 度、つまり 2PI ラジアンです。 したがって、 を次のように書きます:

コードをコピーします


コード


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

今度は 1/4 の円を描きましょう。角度は 90 度です。前述したように、360 度の角度は 2PI ラジアンなので、1 度の角度は 2PI/360=PI/180 ラジアン、90 度は 2PI/360*90=PI/2 ラジアンになります (他の角度は自分で計算してください) ）。

コードをコピーします


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

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

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

でも、左回りかどうかを決めるパラメータが前にあるんじゃないでしょうか？それを true に設定してはどうでしょうか?

コードをコピーします

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

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




角度が反時計回りになり、円弧が 360 -90 になることがわかります。 =270度。

しかし！誰もが注意すべきことの 1 つは、始点と終点の計算方法は常に 0 度から始まり、時計回りに伸びるということです。順方向や逆方向というものはありません。時計回りと反時計回りは、円弧が描かれる方向にすぎません。

これにより、行きつ戻りつが混乱するのを防ぐだけでなく、計算も簡単になります。 ただし、反時計回りに柔軟に使用すると便利な場合があります。 上の例では、開始角度はすべて 0 です。次に、90 度など、他の開始角度を試してみましょう。

コードをコピーします

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

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


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

質問: 0度以外の始点から完全な円を描いても大丈夫ですか?もちろん、円弧の終点を 360 度の開始角度に設定する限り、次のようにすることができます。

コードをコピー

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

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

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