javascript - HTML キャンバスの円弧関数のチュートリアル

Question

arc() 関数のすべてのパラメーターが (実験によって) 何であるかを理解できず、それらを説明しているように見えるチュートリアルを見つけられませんでした。arc() 関数の適切な説明はどこにありますか?

Answer 1

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

最初の 3 つのパラメータ x と y と radius は円を表し、描かれる円弧はその円の一部になります。startAngle と endAngle は、円に沿って描画を開始および停止する場所です。0 は東、Math.PI/2 は南、Math.PI は西、Math.PI*3/2 は北です。反時計回りが 1 の場合、円弧の方向が逆になります。

https://developer.mozilla.org/En/Canvas_tutorial/Drawing_shapes#Arcs

添付の図では、唯一の違いは反時計回りのパラメーターです。Math.PI/2 は、時計回りまたは反時計回りの場合、常に南で終了します

Answer 2

私は同じ問題を抱えていて、それを理解するのに役立つ小さなインタラクティブなページを作成しました:

http://www.scienceprimer.com/drawing-circles-javascript-html5-canvas-element

すべてのパラメータを調整でき、結果の円弧がリアルタイムでレンダリングされます。このページでは、fill()、stroke()、および closePath() メソッドが arc() メソッドとどのように相互作用するかも示しています。

Answer 3

MDCによると：

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

x、y、および半径は明らかに円のパラメータです。startAngleとendAngleはラジアンで、東から始まります。反時計回りはブール値です。

Answer 4

HTML5 のキャンバスとアーク機能の簡単な紹介については、この簡単な例を確認してください: http://pastebin.com/kxB7uJLD

さよなら。