Рисование кривых в браузере всегда было нелегкой задачей. Для того, чтобы нарисовать диаграмму приходилось генерировать изображение или создавать SVG на сервере. Создание кривых на лету используя JavaScript требовало немало навыков, познаний в математике и терпения.
Канва изменила все. Теперь мы можем рисовать и анимировать сложные линии, кривые и формы всего в нескольких строках кода. Сегодня поговорим о квадратичных кривых.
Что такое квадратичные кривые?
Погрузимся немного в математику. Квадратичные кривые имеют начало (Р0) и конец (Р2), а также одну контрольную точку (Р1), которая определяет кривизну линии. Квадратичные кривые отлично подходят для рисования плавных скруглений.Теперь перейдем к практике. Канва поддерживает квадратичные кривые. Для начала инициализируем 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 в следующих статьях, не пропустите 😉