質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.48%

  • JavaScript

    16956questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • canvas

    264questions

    HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

CANVASのarcメソッドの引数が分からない

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 408

aaaaaaaa

score 469

canvasで円を描画する関数arcの第三引数以外の意味がよくわからず理解できません。
ブレイクスルーjavascriptという書籍の66頁によれば、

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

//ctx.arc(円の中心のX座標,円の中心のY座標,円の半径,円の始まりの角度,円の終わりの角度,描く向き);
ctx.arc(100,100,40,0,Math.PI*2); 

ちょっとややこしいのが4番目と5番目の引数です。ここで指定する角度はラジアンで指定しなければいけません。<略>
円を描く場合は、0度から360度までパスを描きたいので「0*Math.PI/180」から「360*Math.PI/180」まで、これを計算すると、上記のコードになります。

とあります。

まず第一引数と第二引数の説明である円の中心のX座標、Y座標というのは、ブラウザの表示領域の座標に円の中心が来るように…ということでしょうか。

次に第四引数と第五引数ですが、円の始まり角度円の終わりの角度というのがいまいちよくわかりません。

最後の引数ですが、こちらによると

anticlockwise 引数が false で endAngle-startAngle が 2π 以上、または、anticlockwise 引数が true で startAngle-endAngle が 2π 以上なら、その円弧は、この円周全体となります。

そうでなければ、円弧は、開始地点から終了地点までの円周に沿ったパスとなります。このパスは、anticlockwise 引数が true なら反時計回りとなり、そうでなければ時計回りとなります。その地点は円上にあるため、単にゼロからの角度とはいっても、
その円弧は 2π ラジアンより大きい角度をカバーすることは決してできません。もし 2 つの地点が同じなら、または、その半径が 0 なら、その円弧はどちらの方向にも長さ 0 だとして定義されます。

とありました。anticlockwise(反時計回り)をfalseにすれば時計回りに、trueにすれば時計回りに円や弧が描画されることが分かりました。また第四引数と第五引数が360度以下なら第四引数の数値の位置から終了地点までを結んだ円弧ができあがります。

ですが、 

endAngle-startAngle が 2π 以上なら、その円弧は、この円周全体となります。

というのと

その地点は円上にあるため、単にゼロからの角度とはいっても、
その円弧は 2π ラジアンより大きい角度をカバーすることは決してできません。もし 2 つの地点が同じなら、または、その半径が 0 なら、その円弧はどちらの方向にも長さ 0 だとして定義されます。

というのがよくわかりません。前者は2πは度数法でいうと360度なので、引数がfalse或いは、trueで360度以上ならその円弧は円周全体となる、という言葉がよく理解できません。360度あれヴぁ円になることを回りくどくいっているのでしょうか。
後者は、360度より大きい角度をカバー?というか描画しないし、第四引数と第五引数が同じなら、または、第三引数の半径の数値が0なら、円弧の長さが0になり、表示されないということであっておりますか。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+2

arcという名前の通り、このメソッドは完全な円だけではなく円弧を描くためにも使えます。となれば、中心と半径以外に、「どこからどこまで」描くかを指定する必要がありますが、それが4つ目・5つ目の引数です。

角度は、x軸の正方向(右)が0ラジアンになって、そこから時計回りに下がMath.PI/2ラジアン、左がMath.PIラジアン、上がMath.PI*3/2ラジアン、一回転した右がMath.PI*2ラジアン、となります。

あと、canvasに円を1つ描くだけなら、「canvas内の座標」にあまり意味はなくなりますが、他にも図形を描くとなれば、位置関係を決める必要が出てきます。

参考URL

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/10/13 19:33

    ご回答ありがとうございました。おかげさまで第五引数まで理解することができました。

    第六引数の書く向きとはいったいなんなのでしょうか。

    キャンセル

checkベストアンサー

+1

向きはオレンジの矢印の方向になります。

デフォルトは false で、時計回りで 0 から Math.PI/2 の位置まで描き
true なら反時計周りで 0 から Math.PI/2 の位置まで描くので

イメージ説明

以下の arc を試すとこのような線になります。

false デフォルト 時計回り

ctx.arc(100, 100, 40, 0, Math.PI/2, false)
ctx.stroke()

true 反時計

ctx.arc(100, 100, 40, 0, Math.PI/2, true)
ctx.stroke()

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    HTML5のCanvasについて

    現在Canvasを勉強しています 今作ろうとしているものが ランダムにカラーと座標とサイズを決めた円を50個描画する というこのなのですが一回しか描画できません どこを改善すればい

  • 受付中

    canvasからのピクセル値を取得

    画像からトリミングした範囲をcanvasに描いて、それをグレイスケール化したときの値が知りたいです。そこで、下記のようなプログラムを作成したのですが、値を取得することができません。

  • 解決済

    javascriptのsetIntervalとclearIntervalについて

    もしかしたらトンチンカンな質問かもしれませんが、よろしくお願いします。 var cnt = 0; var timerId; function simulation(){

  • 解決済

    javascriptで時計を表示

    javascriptdeでcanvasに 時計を表示したいのですが 5分おきに少し長いメモリにしたのですがどうすればいいのでしょうか。 また、針の太さを変える方法を教えてください

  • 解決済

    javascriptで時計の枠のメモリの表示の仕方を教えてください。お願いします

    javascriptdeでcanvasに 時計を表示したいのですが5分おきに少し長いメモリを追加したのですがどうすればいいのでしょうか。 時針、分針、秒針はできてます。下がHTML

  • 受付中

    Chart.js、ドーナツグラフのデータのカウントアップ(ダウン)アニメーション表示

    実現したいこと ドーナツグラフ 円グラフに対する線形グラデーション ドーナツグラフの真ん中に数値を表示する 真ん中の数値をカウントアップ(ダウン)アニメーションをつけ

  • 解決済

    画像の読み込みに失敗する

    前提・実現したいこと MicrosoftのインターネットブラウザEdgeでプログラム動作を確認していたのですが、たまたまMacのSafariを使ったところ、画像の表示を行う部分のプ

  • 解決済

    canvasを画像化してPOSTで送信したい

     前提・実現したいこと Django2.0 での質問です。 htmlに埋め込んだcanvasに描画をしたのち画像化・POSTメソッドで送信しdjangoの方で画像をPILで扱い

同じタグがついた質問を見る

  • JavaScript

    16956questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • canvas

    264questions

    HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。