В предыдущей статье я говорил о трех способах рисовать кривые на холсте: Arc, Arcto и QuadratieCurveto. Все они имеют одну общую черту, то есть кривые, которые они рисуют, могут быть смещены только на одну сторону. Самая большая разница между Beziercurveto, упомянутым сегодня, заключается в том, что у них есть две контрольные точки, то есть они могут нарисовать S-образную кривую.
Beziercurveto, которая является так называемой кривой Bezier, если вы изучили некоторые инструменты для рисования, вы можете понять это немедленно.
Синтаксис Beziercurveto заключается в следующем :ctx.beziercurveto (x1, y1, x2, y2, x, y); Я объясню его параметры как обычно. (x1, y1) является координатой контрольной точки 1, (x2, y2) является координатой контрольной точки 2, а (x, y) является координатой его конечной точки. Как и Quadraticcurveto, его начальные координаты также предварительно устанавливаются Moveeto.
Следовательно, Beziercurveto Нарисуйте кривую, требуется 4 точки: начальная точка, конечная точка, контрольная точка 1, контрольная точка 2. Для последующего объяснения здесь я предполагаю, что контрольная точка 1 соответствует начальной точке и точке управления 2 соответствует конечной точке
Здесь мы упомянем старую проблему рисунка холста, что означает, что рисунок кода основан на предположениях, и вам нужно обновить рисунок, чтобы понять, где вы его нарисуете.
Я продолжу предыдущую прекрасную традицию и нарисую несколько вспомогательных линий, чтобы помочь всем понять:
var x1 = 450, // x координата контрольной точки 1
y1 = 300, // y контрольной точки 1
x2 = 450, // x контрольной точки 2
y2 = 500, // y контрольной точки 2
x = 300, // конечная точка x
y = 500; // конечная точка y
ctx.moveto (300 300); // Начальная точка
ctx.beginpath ();
ctx.linewidth = 5;
ctx.strokestyle = "rgba (0,0,0,1)"
ctx.moveto (300 300);
ctx.beziercurveto (x1, y1, x2, y2, x, y);
ctx.stroke ();
// Начало рисовать вспомогательные линии
ctx.beginpath ();
ctx.strokestyle = "rgba (255,0,0,0,5)";
ctx.linewidth = 1;
// Подключите начальную точку и точку управления 1
ctx.moveto (300 300);
ctx.lineto (x1, y1);
// Подключите конечную точку и точку управления 2
ctx.moveto (x2, y2);
ctx.lineTo (x, y);
// Подключить начальные и конечные точки (базовая линия)
ctx.moveto (300 300);
ctx.lineTo (x, y);
ctx.stroke ();
Здесь я сначала нарисую кривую, похожую на Quadraticcurveto, которая смещена только к одной стороне. Эта линия кажется относительно круглой, потому что X координаты контрольных точек 1 и 2 одинаковы.
Теперь нарисуйте S-образную кривую, чтобы доказать, что Beziercurveto уникален:
var x1 = 150;
...
Фактически, просто измените координаты контрольной точки 1. Если координаты контрольной точки 1 и контрольной точки 2 соответственно с обеих сторон базовой линии, нарисована S-образная кривая; Если оба находятся на одной стороне базовой линии, это эффект, аналогичный квадратичности.
Ситуация этого примера относительно проста. Базовая линия (отправная точка к конечной точке) является вертикальной, но большую часть времени в реальном применении наша базовая линия наклонная, поэтому ситуация гораздо сложнее. Но давайте попробуем самостоятельно
Каждый метод рисования выглядит относительно единственным по функции, но мощный метод объединяется одним методом. В последующей статье я попытался объяснить некоторые общие методы рисования, такие как округлые прямоугольники и эллипсы. Им нужно было объединить эти отдельные методы в прошлом.