Давайте продолжим говорить о методе рисования кривых на холсте. Сегодня я расскажу о Quadraticcurveto.
Честно говоря, этот метод немного страшный, вы можете сначала испытать его от имени функции. Кстати, я думаю, что необходимо сократить это имя функции.
квадратичный означает квадратичный, то есть квадратичное квадратичное уравнение в математике. Параметры ctx.quadraticcurveto заключаются в следующем:
ctx.quadraticcurveto (x1, y1, x, y);
Где X и Y являются координатами конечной точки, а X1 и Y1 - координаты контрольной точки кривой? Что? Вы спрашиваете меня, где находится отправная точка? Начальная точка определяется с использованием Moveto до этого.
Причина, по которой я поместил координаты управляющей точки с последовательным номером 1, заключается в том, что функция кривых рисунков, упомянутых позже
Начальная точка, определяемая Moveto, и конечная точка, определяемая квадратичкой, самих, может быть подключена в прямую линию. Поскольку Quadraticcurveto имеет только одну управляющую точку, эта управляющая точка находится либо на левой стороне линии, либо на правой стороне линии, поэтому Quadraticcurveto может только рисовать дуги, но все еще не может нарисовать S-образную линию.
Для легкого понимания я буду продолжать использовать метод рисования вспомогательных линий в предыдущей статье. Предварительный код заключается в следующем:
var x1 = 350,
y1 = 250,
x = 400,
y = 500;
ctx.beginpath ();
ctx.strokestyle = "#000";
ctx.moveto (300 300); // начальная точка
ctx.quadraticcurveto (x1, y1, x, y); // настоящая кривая
ctx.stroke ();
ctx.beginpath ();
ctx.strokestyle = "rgba (255,0,0,0,5)";
ctx.moveto (300 300);
ctx.lineTo (x1, y1); // Эта линия и следующая строка - линии, которые рисуют управляющую точку
ctx.lineTo (x, y);
ctx.moveto (300 300); // Начальные и конечные точки начала и конечных точек кривой
ctx.lineTo (x, y);
ctx.stroke ();
Здесь я нарисовал две вспомогательные линии, одна - это линия соединения между начальной точкой и конечной точкой, а другая - вспомогательная линия между отправной точкой и контрольной точкой, а затем до конечной точки (на самом деле два). Пересечение этих двух линий является координатой контрольной точки квадратично -обработки.
Quadraticcurveto может только рисовать кривые в дугах, но эта дуга может быть очень нерегулярной, что также является улучшением по сравнению с дугой и Arcto.
Кроме того, Quadraticcurveto не будет иметь изменений, как Arcto.
Конечно, если вы очень далеко вытащите контрольную точку, графика может стать неузнаваемой для вас. Попробуем:
y1 = 950;
Я только что изменил Y1 немного больше, и кривая вышла за пределы диапазона холста.
Тем не менее, диапазон кривых, проведенных Quadraticcurveto, никогда не может достичь или превышать координаты контрольной точки. Нам нужно только хорошо контролировать контрольную точку, поэтому нам не нужно беспокоиться.
Я написал простую перемещающуюся страницу примера, показывающую процесс рисования кривых в квадратичке, надеясь помочь вам углубить ваше понимание:
Пожалуйста, будьте более инклюзивными, если код написан уродливым.