HTML5 Canvas API_html5 チュートリアル ヒントによる円弧と円の描画に関するチュートリアル

HTML5 では、CanvasRenderingContext2D オブジェクトも円または円弧を描画するためのメソッドを提供します。次の属性とメソッドの概要を参照してください。

JavaScript コードコンテンツをクリップボードにコピーします

1. arc(x, y, radius, startRad, endRad, 反時計回り)

キャンバス上に座標点(x,y)を中心、半径を半径とする円上に円弧を描きます。このアークの開始アークは startRad、終了アークは endRad です。ここでのラジアンは、x 軸の正の方向 (時計の 3 時) を基準に時計回りに回転した角度として計算されます。反時計回りは、反時計回りまたは時計回りのどちらの方向で描画を開始するかを示します。true の場合は反時計回りを意味し、false の場合は時計回りを意味します。反時計回りパラメータはオプションであり、デフォルトは時計回りを意味する false です。

arc()メソッドでのラジアン計算方法

JavaScript コードコンテンツをクリップボードにコピーします

1. arcTo(x1, y1, x2, y2, radius)

このメソッドは、現在の端点、端点 1 (x1, y1) と端点 2 (x2, y2) によって形成される角度を使用し、角度の両側に接し、半径が のセクションを描画します。半径 円上の円弧。一般的に、円弧の描画の開始位置は現在の端点、終了位置は端点 2、円弧の描画方向は 2 つの端点を結ぶ最短の円弧の方向となります。さらに、現在の終点が指定された円上にない場合、このメソッドは現在の終点から円弧の始点まで直線を描きます。
arcTo() メソッドを詳しく紹介するには多くのスペースがあるため、arcTo() の詳しい使用方法については、ここを参照してください。

キャンバス上に円弧を描画するための上記の API を理解した後、arc() を使用して円弧を描画する方法を見てみましょう。 arc() によって受け取られる 4 番目と 5 番目のパラメーターが円弧の開始ラジアンと終了ラジアンを表すことはすでにわかっています。読者の皆さんは学校の数学や幾何学の授業でラジアンについて習ったことがあるかと思います。ラジアンは角度の単位です。円弧の長さがその半径と等しい円弧の場合、その円弧が定める中心角は 1 ラジアンです。また、半径 r の円の円周は 2πr であることもわかっています。このジオメトリの知識があれば、arc() メソッドを使用して円弧を描くことができます。

キャンバスを使用して円弧を描きます

次に、半径 50px の円の 1/4 の円弧を描いてみましょう。

JavaScript コードコンテンツをクリップボードにコピーします

4. "UTF-8">
<キャンバス ID=
10. "myCanvas" width="400px" height="300px" style="border: 1px ソリッドレッド;"> お使いのブラウザは Canvas タグをサポートしていません。
13. <スクリプトタイプ=
"text/javascript"
14. > //Canvas オブジェクト (キャンバス) を取得します
15. var
Canvas = document.getElementById(
16. "myCanvas"); //HTML5 をサポートしていない一部のブラウザで構文エラーが表示されるのを避けるために、現在のブラウザが Canvas オブジェクトをサポートしているかどうかを単純に検出します
17. if(canvas.getContext){
18. //対応する CanvasRenderingContext2D オブジェクト (ブラシ) を取得します
19. var ctx = Canvas.getContext(
"2d"
20. );
//新しい描画パスを開始
22. ctx.beginPath();
//円弧の色を青に設定します
24. ctx.ストロークスタイル = "青";
25. var Circle = {
26. y : 100, //円の中心のY軸座標値
27. r : 50 //円の半径
28. };
//座標点(100,100)を中心、半径50pxの円の時計回りに円弧を描きます
29. ctx.arc(circle.x,circle.y,circle.r, 0, Math.PI / 2,
false
30. ); >
31. //指定されたパスに従って円弧を描画します
ctx.ストローク();
32. }

35. 対応する表示効果は次のとおりです:
    

    キャンバスを使って時計回りに円弧を描きます
    上図のように、描いた円弧が位置する円の中心座標を(100,100)、半径を50pxに設定します。半径 r の円の円周は 2πr、つまり完全な円の対応するラジアンは 2π (正角に換算すると 360°) なので、円弧の 1/4 を描きたいのですが、ラジアンが π/2 (つまり 90°) である限り。上記のコードでは、JavaScript で π を表す定数 Math.PI を使用しています。

    さらに、上記のコードでは、円弧を描く方向も時計回り (false) に設定しています。開始ラジアンは 0、終了ラジアンは π/2 であるため、円弧は x 軸の正の方向から時計回りに描かれ、結果は上のグラフになります。上記コードの円弧の描画方向を反時計回りに変更するとどうなるでしょうか?

    JavaScript コードコンテンツをクリップボードにコピーします

    2. 対応する表示効果は次のとおりです:
       

       キャンバスを使用して反時計回りに円弧を描きます

       
       キャンバスを使用して円を描きます

       円弧の描き方を学べば、上のコードの最後の円弧を 2π に変更するだけで、簡単に円を描くことができます。

       JavaScript コードコンテンツをクリップボードにコピーします

       対応する表示効果は次のとおりです:
       4. JavaScript コード
       コンテンツをクリップボードにコピーします

       注: arc() メソッドの開始ラジアン パラメーター startRad と終了ラジアン パラメーター endRad はどちらもラジアン単位で、360 などの数値を入力した場合でも 360 ラジアンとみなされます。上記のコードの終了アークを 360 に設定すると、どのような結果が生じますか?これは描画の方向 (つまり、反時計回りのパラメータの値) に依存します。時計回りに描画した場合 (false)、反時計回りに描画した場合は完全な円が描画され、2π を超えるラジアンは に変換されます。ラジアンは 2π 以上です。たとえば、上記コードの終了円弧を 3π (Math.PI * 3) に設定すると、反時計回りが false の場合、完全な円として表示されます。 true の場合、表示効果は同じになります。効果は一貫しています。
       終了円弧を 3π に設定した場合、時計回り (偽) 回転の描画効果
       終了円弧を 3π に設定した場合、反時計回り (真) 回転の描画効果