Предыдущий ролик Следующий ролик  

Видео урок: Сложные фигуры: кривые Безье и квадратичные кривые

HTML5: графика и анимация с Canvas

Мы уже познакомились со многими хорошими операциями по рисованию, которые возможны при использовании canvas. По факту, canvas позволяет вам рисовать кривые Безье и квадратичные кривые. В случае с кривыми Безье есть начальная точка и есть конечная точка, и здесь используется еще две точки, которые называются контрольными точками, и они определяют, как будет нарисована кривая. Квадратичные кривые похожи. Они используют начальную точку, но только одну контрольную точку и одну конечную точку.

Кривые Безье из-за двух контрольных точек позволяют вам создавать кривые, которые немного сложнее. Давайте рассмотрим эти виды кривых. В кривой Безье есть начальная точка, вот она, контекстная точка. Это уже конечная точка. А вот две контрольные точки. Эти две контрольные точки определяют, как в каждом случае линия будет изгибаться по отношению к контрольной точке. Вы видите, что поскольку конечная точка находится близко к своей контрольной точке, кривая здесь немного другая, чем вот здесь.

В квадратичных кривых есть только одна контрольная точка. Вы устанавливаете контекстную точку, контрольную точку и конечную точку, и вы видите, что кривая не такая сложная, как кривая Безье. Вот функции для рисования этих кривых. Как и с контурами, вы используете функцию moveTo, которую мы видели, когда учились рисовать линии. Сперва вы размещаете карандаш, затем вы вызываете bezierCurveTo, а затем вы даете набор точек. cx и cy представляют контрольные точки.

Вот это первая контрольная точка, а вот это вторая, Затем вы устанавливаете конечную точку. Это похоже на quadraticCurveTo: вы используете moveTo, чтобы переместиться на начальную точку, затем вы даете контрольную точку и конечную точку. давайте рассмотрим все это в реальном примере. Я в редакторе кода, в разделе curves из файла с кусками кода. Открываем файл с примерами, сейчас это будет curves_start.

Это начальная точка для нашего примера с кривыми. Копирую первый пример. Беру свойства stroke и lineWidth, вызываем их вот здесь, вставляем и сохраняем. Все верно, давайте посмотрим, как это выглядит в браузере. У нас получится кривая Безье синего цвета шириной в 5 пикселей; точно получится. Довольно интересно, но давайте немножко поиграем, чтобы увидеть, что такое на самом деле контрольные точки.

Возвращаемся к коду, возвращаемся к кускам кода. И сейчас мы сделаем так, чтобы контрольные точки были видимыми. Копируем и вставляем этот код. Теперь здесь у нас полный пример. Вызываем beginPath, как мы делали это и ранее. Обозначаем начальную точку. Затем вызываем функцию bezierCurveTo, а зтем мы даем весь набор точек, которые определяют, как будет нарисована кривая Безье. Затем мы вызываем stroke, чтобы ее нарисовать. Чтобы контрольные точки были видимыми, мы определяем для свойства strokeStyle 25% opacity, black с width = 1.

А затем мы просто вызываем moveTo и lineTo. И если вы посмотрите, на самом деле, мы отмечаем нахождение контрольных точек, так что теперь вы видите, какое влияние контрольные точки оказывают на кривую Безье. Сохраняем, обновляем страницу, теперь вы видите наши контрольные точки, и мы можем их поменять. Давай поменяем эту, допустим, на 300, вот оно. Сохраняем. Обновляем. Вот такой будет результат, если вы переместите контрольную точку сюда. Это наша кривая. Вы видите, что контрольные точки влияют на кривую. Теперь давайте нарисуем квадратичную кривую. Идея такая же. Берем кривую со всеми ее точками, копируем и вставляем их сюда.

В данном случае у нас зеленая линия шириной в пять пунктов, и как со всеми контурами, мы начинаем контур. Мы определяем начальную точку, затем мы вызываем quadraticCurveTo, и вот здесь мы даем необходимые точки. Это контрольная точка, это конечная точка, мы вызываем stroke, чтобы наша кривая была видимой. Вот здесь у нас есть немного кода, чтобы сделать кривую видимой. Сохраняем. Обновляем.

Вот наша квадратичная кривая, вот контрольная точка, давайте немного с этим поиграем. Кривая начинается на 400, 200 - это начальная точка - а затем кривая идет сюда. Давайте немного изменим местоположение, например, на 500, также мы поменяем код, обновляем. Вы видите, что при перемещении контрольной точки, кривая становится другой. В данном уроке мы рассмотрели, как рисовать кривые Безье и квадратичные кривые, так же мы увидели, что контрольные точки влияют на то, как будут нарисованы кривые.