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

Рисование кривых в браузере всегда было нелегкой задачей. Для того, чтобы нарисовать диаграмму приходилось генерировать изображение или создавать 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 в следующих статьях, не пропустите 😉

Запись опубликована в рубрике HTML & CSS с метками , . Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">