Как рисовать квадратичные кривые с использованием HTML5 Canvas

Рисование кривых в браузере всегда было нелегкой задачей. Для того, чтобы нарисовать диаграмму приходилось генерировать изображение или создавать SVG на сервере. Создание кривых на лету используя JavaScript требовало немало навыков, познаний в математике и терпения.

Канва изменила все. Теперь мы можем рисовать и анимировать сложные линии, кривые и формы всего в нескольких строках кода. Сегодня поговорим о квадратичных кривых.

Что такое квадратичные кривые?

Квадратичная кривая

Теперь перейдем к практике. Канва поддерживает квадратичные кривые. Для начала инициализируем Canvas контекст и установим толщину и цвет линий.

canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d")
ctx.lineWidth = 6;
ctx.strokeStyle = "#333";

Теперь установим начальную точку для нашей кривой (Р0):

ctx.beginPath();
ctx.moveTo(100, 250);

Используем метод quadraticCurveTo() для рисования квадратичной кривой. О принимает четыре параметра:
координата Х контрольной точки (P1)
координата Y контрольной точки (P1)
координата Х конечной точки (P2)
координата Y конечной точки (P2)

После этого вызовем метод stroke(), чтобы завершить рисование нашей кривой:

ctx.quadraticCurveTo(250, 100, 400, 250);
ctx.stroke();

Вот и все. Просто, не правда ли? Еще больше интересного о HTML5 Canvas в следующих статьях, не пропустите 😉