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

Видео урок: Настройка и использование цветов и стилей

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

Одной из основных вещей, которые нужно настроить, если вы собираетесь рисовать в canvas, это настроить некоторые цвета и стили, и рисующий контекст 2D canvas предоставляет некоторые глобальные свойства, которые влияют на то, как обрамляются и заполняются объекты. Есть три свойства. Первое - это fillStyle. Это стиль, который используется при заполнении фигуры. И вы настраиваете его так, как вы обычно настраиваете свойство CSS color. Например, вы можете использовать CSS color, или градиент, или паттерн, и по умолчанию стоит черный цвет, если вы не назначили другой.

Позже мы рассмотрим градиенты и паттерны. Сейчас мы сфокусируемся на цветах. В дополнение к fillStyle есть strokeStyle. Идея состоит в том же. Вы можете установить цвет, градиент или паттерн, по умолчанию они черные, и это цвет или стиль, который вы используете, когда рисуете обрамление, обычно линии или контуры. Есть также свойство lineWidth, и это ширина воображаемого карандаша, которую использует canvas, когда рисует линии. Вот это ширина по умолчанию, но вы можете установить любую.

Рисование с цветами и стилями проходит в два этапа. Во-первых, вы устанавливаете стили для заполнения и обрамления, а также ширину строки на любые значения, которые хотите, а затем вы вызываете операцию по рисованию, которая создает фигуру или еще что-то. Давайте посмотрим на такой код и увидим, как это работает. Так, вот я в редакторе кода, я начну с файла colors_start.htm. Если вы посмотрим на него в браузере, вы увидите здесь наш canvas, я его выделил, чтобы было лучше видно.

Давайте вернемся к коду. В файле Snippets в разделе Color я копирую эти две строки и вставляю их сюда. Мы проходим все операции, чтобы получить контекст и убедиться, что у нас есть действительный canvas и все остальное, а затем мы определяем, чтобы fillStyle было зеленым. Далее я вызываю операцию, которая называется fillRect, и она заполнит прямоугольник этим цветом. Давайте перейдем в браузер и обновим страницу, и вы видите, что в canvas появился зеленый прямоугольник.

Давайте используем стиль для штриховки, возвращаемся в Snippets, я копирую эти три строки и возвращаюсь к коду, вот сюда мы их вставляем. В этом примере я устанавливаю lineWidth на пять, а в strokeStyle я использую объявление стилей CSS для RGB и Alpha. Я устанавливаю цвет на 100% opacity и синий. А сейчас я использую функцию strokeRect, и она заполнит прямоугольник.

По краям будет линия. Сохраняем. Если мы вернемся в браузер и обновим страницу, вы увидите, что тут есть зеленый прямоугольник с синей каймой. Здесь я показал вам базовые операции по рисованию, а также как установить стили для заполнения и штриховки и ширину линии, которые влияют на то, как все будет нарисовано в canvas. Все эти свойства влияют на все то, что вы рисуете в canvas, это довольно базовые вещи, которые мы изучили.