В статье о линии рисования холста я говорил о методе рисования прямых линий. Эта статья о кривых рисования должна была быть опубликована давно, но поскольку кривые рисунка на холсте очень особенные, я еще не понял их, поэтому я должен попробовать их шаг за шагом.
Одним из трудностей в рисовании кривых в холсте является то, что у него есть 4 функции кривых! Это дуг, аркто, квадратичный кривето, Beziercurveto. Позвольте мне начать с простейшего метода ARC.
Функция дуги состоит в том, чтобы нарисовать обычную дугу, которая может быть полным кругом или определенной дугой круга.
Синтаксис дуги выглядит следующим образом :context.arc (x, y, radius, startangle, endangle, против часовой стрелки)
Я объясню его параметры, то есть
дуга (центр X, центр Y, радиус, угол начального, угол окончания или будь то против часовой стрелки)
Что мы должны делать, если мы нарисуем полный круг с дугой? Все заметили, что в параметрах есть начальный угол и конечный угол. Если наш начальный угол равен 0, а угол окончания - 360, разве это не идеальный круг?
Правильное решение! Но следует отметить, что угол здесь представлен радианами (и как и Flash). Полный круг составляет 360 градусов, что составляет 2PI -радианы.
Итак, мы пишем это :Ctx.ARC (400,400,20,0, Math.pi*2);
ctx.fill ();
ctx.stroke ();
Как и Lineto, ARC также является путем для рисования, поэтому мы должны вызвать метод заливки или инсульта, чтобы показать фигуру (на рисунке используются красный удар и полупрозрачный красный заполнение).
Теперь давайте нарисуем круг 1/4, угол составляет 90 градусов. Как упоминалось ранее, угол 360 градусов составляет 2PI радиан, тогда угол 10 градусов составляет 2PI/360 = PI/180 радиан, затем 90 градусов - 2PI/360*90 = PI/2 радиан (пожалуйста, рассчитайте другие углы сами).
Ctx.ARC (400,400,20,0, Math.pi*2/4);
Из рисунка мы можем определить, что 0 градусов дуги обычно используется 0 градусов по математике, но угол открывается по умолчанию по умолчанию, которая противоположна математической модели (связанную с координатами, поскольку координаты холста также противоположны математическим координатам).
Но разве перед ним нет параметра, который определяет, является ли он против часовой стрелки? Как насчет того, чтобы подвести его к истину?
Ctx.ARC (400,400,20,0, Math.pi*2/4, True);
Вы увидите, что угол становится против часовой стрелки, в результате чего дуга становится 360-90 = 270 градусов.
но! Одна вещь, на которую вы должны обратить внимание, это то, что метод расчета отправной точки и конечная точка всегда основан на 0 градусах и простирается по часовой стрелке, и нет никакого высказывания, что Cisco и наоборот правда. Против часовой стрелки - это только направление дуги.
Это не только предотвращает путаницу от перехода туда -сюда, но и облегчает расчет.
Тем не менее, гибкое использование против часовой стрелки иногда полезно.
В приведенном выше примере наш начальный угол составляет 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 градусов
Тем не менее, этот подход является исключительно вопросом найти неприятности без каких -либо проблем, и нормальные люди не будут его использовать.
Резюме : Метод холста-это нарисовать обычные дуги, и вы можете рисовать только обычные дуги, и вы не можете нарисовать другие странные дуги, такие как S-образные, хотя мне больше всего нравится S-образный.