Учебник для HTML-холста

Я не могу понять, каковы все параметры функции arc() (путем экспериментирования), и я не нашел учебника, который, кажется, объясняет их. Где хорошее объяснение функции arc() было бы?

Ответы

Ответ 1

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

Первые три параметра, x и y и радиус, описывают круг, нарисованная дуга будет частью этого круга. startAngle и endAngle - это то, где по кругу начинаются и останавливаются рисование. 0 - восток, Math.PI/2 - юг, Math.PI - западный, а Math.PI * 3/2 - север. Если против часовой стрелки равно 1, то направление дуги меняется на противоположное.

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

Clockwise

AntiClockwise

На прилагаемых диаграммах единственная разница - это знак против часовой стрелки. Math.PI/2 всегда заканчивается на юг по часовой стрелке или против часовой стрелки

Ответ 3

У меня была такая же проблема, и я сделал небольшую интерактивную страницу, чтобы помочь понять ее:

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

Все параметры могут быть скорректированы, и полученная дуга отображается в реальном времени. На странице также показано, как методы fill(), stroke() и closePath() взаимодействуют с методом arc().

Ответ 4

Согласно MDC:

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

x, y, и радиус, очевидно, являются параметрами круга. startAngle и endAngle находятся в радианах, начиная с востока. против часовой стрелки является булевым.

Ответ 5

Проверьте этот простой пример для краткого введения в функцию холста и дуги HTML5: http://pastebin.com/kxB7uJLD

Так долго.