Как рисовать кривые Безье на Canvas в HTML5

В прошлом посте я рассказал о том, как строить квадратичные кривые на канве HTML5, используя минимум кода. Теперь пришло время других кривых — кривых Безье.

Что такое кривые Безье?

Построение кривой Безье

Построение кривой Безье

Вероятно, Вы встречались с этим термином, пользуясь различными графическими приложениями. Немного поясню, что эти кривые из себя представляют.

Кривые Безье задаются четырьмя точками:

  • Р0 и Р3 — начало и конец линии
  • Р1 и Р2 — контрольные точки

Такие кривые дают больше контроля над формой. Они идеальны для создания диаграмм, в которых нужно соединить две фигуры в одну плавно.

Переходим к коду. Для начала инициализируем контекст и зададим параметры кривой:

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

После этого задаем начало кривой — точку Р0:

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

Теперь воспользуемся методом bezierCurveTo(), предназначенный для рисования кривых Безье. Он принимает 6 аргументов:
x-координата первой контрольной точки (P1)
y-координата первой контрольной точки (P1)
x-координата последней контрольной точки (P2)
y-координата последней контрольной точки (P2)
x-координата конечной точки (P3)
y-координата конечной точки (P3)

Вслед за методом bezierCurveTo() применяем stroke(), чтобы закончить кривую и показать ее в браузере:

ctx.bezierCurveTo(150, 100, 350, 100, 400, 250);
ctx.stroke();

Кривая Безье готова. Просто и быстро!

Запись опубликована в рубрике 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="">