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

Видео урок: Основные фигуры: прямоугольники и линии

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

В этом ролике мы рассмотрим, как рисовать основные фигуры. Мы уже несколько раз это видели в наших примерах, а теперь давайте более подробно рассмотрим, как рисуются прямоугольники и линии. Прямоугольники - это единственные простые фигуры, поддерживаемые canvas. Тогда как другие технологии, например, SVG, также поддерживают эллипсы, в canvas есть только прямоугольник, который называется простой фигурой. Эту фигуру очень легко нарисовать, она требует только самых простых действий. Прямоугольники - это фактически единственные простые фигуры, которые поддерживаются canvas.

Есть три функции для оперирования прямоугольниками. Первая функция - это clearRect, которая стирает прямоугольник, созданный по заданным вами параметрам. Другими словами, она делает область полностью прозрачной; она избавляется от контента прямоугольника. Две другие функции - это strokeRect и fillRect. strokeRect обрамляет прямоугольник в зависимости от стиля, который определен, а fillRect заполняет прямоугольник, тоже в зависимости от определенного вами стиля. Все эти три операции по рисованию прямоугольников начинают свою работу с верхнего левого угла прямоугольника, который вы хотите нарисовать - с этой точки будет начинаться прямоугольник - а затем идет ширина и высота.

Тогда прямоугольник будет такой высоты, как вы указали, и такой ширины, как вы указали. В отличие от других систем для рисования, где нужно задавать все четыре точки, здесь вам нужно указать только одну точку, а затем ширину и высоту желаемого прямоугольника. Линии немного другие. Линии могут быть созданы при помощи разных настроек, касающихся того, как линии соединяются и заканчиваются. Давайте рассмотрим, какие операции можно совершать с линиями. Первые две функции, moveTo и lineTo, используются для рисования линий.

Функция moveTo перемещает воображаемую ручку на заданную точку, но она ничего не рисует. Представьте, что вы берете ручку или карандаш и ставите их на какое-то место на бумаге. Функция lineTo рисует линию от данной точки до новой точки, которую вы задали. Следующие три свойства, lineWidth, lineCap и lineJoin, определяют, как линии выглядят на экране. Мы уже видели lineWidth. Это свойство определяет ширину линии. Функция lineCap определяет, как будет заканчиваться линия, и здесь есть три свойства.

Есть свойство butt, и это свойство по умолчанию, либо же вы можете рисовать линии с круглыми или квадратными концами. Свойство lineJoin определяет, как линии соединяются, и это может быть соединение по кругу, соединение под наклоном или соединение под скосом, которое является соединением про умолчанию. Лимит этого соединения относится к самому соединению, и это лимит того, когда линии обрезаются и рисуются затем под наклоном. По умолчанию это 10, и очень скоро мы это рассмотрим. beginPath запускает новый набор операций по рисованию, а функция stroke собирает все текущие команды по путям и рисует их.

Очень скоро мы посмотрим, как это делается. А сейчас давайте нарисуем простой прямоугольник. В файле с кусками кода я нахожусь в разделе Rectangles, открываю файл, который называется rectangles_start. И вот сюда я собираюсь вставить свой код. Возвращаюсь обратно к файлу с кодом, беру первые два набора, копирую их и вставляю. В данном случае мы сначала нарисуем обрамленный прямоугольник, обрамлением будет синяя линия в 5 пикселей шириной, а затем мы нарисуем закрашенный прямоугольник.

Давайте сохраним это и перейдем в браузер. Вы видите, что прямо здесь есть операции. Одна для контура. Вторая для заполнения. Возвращаемся к коду. Я сейчас копирую и вставляю эти два набора. На самом деле, сначала этот. Я его копирую и вставляю. В данном случае у нас есть прямоугольник, который и обрамлен и заполнен. Обрамление будет красного цвета, а наполнение - желтого. Затем вы увеличили lineWidth на 10. Мы установили новые свойства, а затем мы порисовали.

Мы заполнили и обрамили наш прямоугольник, сохраняем и обновляем страницу. Вы видите, что теперь у вас есть три прямоугольника с разными наборами свойств. А теперь давайте очистим прямоугольник. Копируем, вставляем. Вот что мы сделаем. Мы создадим прямоугольник, охватывающий все три прямоугольника, что мы до этого нарисовали. Этот прямоугольник начинается с точки 25, 25 в верхнем левом углу, его ширина 100, а высота 125.

По факту, у всех у них одинаковая ширина и высота. Они просто начинаются в разных точках X, а затем они перемещаются вправо в canvas. Чистый прямоугольник начинается с X 15, то есть, до первого прямоугольника. Точка Y стоит на 75, значит, наш прямоугольник будет 450 пикселей в ширину и 50 в высоту. Давайте сохраним и посмотрим, что будет. Обновляем страницу, видим, что все прямоугольники нарисованы, но вот это прямоугольник очищен, вот где он.

Таким образом, так мы можем очищать прямоугольники. Теперь давайте посмотрим на линии. Возвращаюсь к файлам с примерами, открываю lines_start. Вот здесь начальная точка. Давайте вернемся к кускам кода. Переходим в раздел про линии, вот он, и тут у нас есть разные примеры, которые мы сделаем. Для первого примера нужно скопировать вот эти строки. Копируем, вставляем. Давайте посмотрим, что произойдет.

Здесь мы создаем цикл for, который идет от 0 до 10, и мы рисуем линии разной ширины. Чтобы нарисовать линию, вы всегда должны начинать с функции beginPath. Она указывает canvas операцию, касающуюся линий, которая говорит, где они должны начинаться. Затем мы переходим к lineWidth. В данном случае мы установим lineWidth на величину счетчика цикла +1 пиксель. То есть, начнем с 1 и закончим на 11. А затем мы перемещаемся на позицию X и позицию Y, определенные линией, которую мы рисуем.

Мы рисуем линию до позиции X 475 и так же с Y. У нас будет нарисовано 10 линий разной ширины, и после каждой линии мы вызываем stroke. Так наши линии будут заполняться. Сначала мы вызываем beginPath. Затем проводим все операции. Затем вызываем stroke, тогда линии будут прорисованы, вот и все. Сохраняем и переходим в браузер. Вы можете видеть, что происходит. Вы рисуете линии разной ширины, начиная от 1 и заканчивая 11, а также от X до Y.

А теперь давайте посмотрим, как рисовать lineCaps. Чтобы нарисовать lineCaps, мы возвращаемся к кускам кода и копируем вот эти строки кода. Вот у нас три окончания, копируем их. Вставляем их вот сюда. Обратите внимание, что у нас есть три canvas: canvas1, canvas2 и canvas3. canvas1 касается ширины линий. Следующий canvas имеет дело с окончаниями линий.

Давайте промотаем обратно. Вот canvas2. Сейчас мы нарисуем две линии, чтобы посмотреть, как при каждой операции различаются окончания строк. Мы рисуем две голубые линии шириной 1 с левой и правой стороны canvas, сейчас мы нарисуем линии, используя каждый lineCaps. Мы устанавливаем наше свойство lineWidth на 25, а strokeStyle на black. Мы нарисуем одну простую линию, одну линию по круглому стилю, одну линию по квадратному стилю от сюда до сюда.

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

Вы видите, что окончания всех линий выглядят по-разному. А теперь давайте используем lineJoins. Для третьего canvas мы копируем вот эти строки, возвращаемся вот сюда и вставляем их. Как и в последнем примере, мы получаем canvas, в данном случае это canvas3. Устанавливаем lineWidth на 15, а strokeStyle на black, а затем для каждого lineJoins мы устанавливаем round, bevel и miter.

Затем мы начинаем путь, перемещаемся, линия и линия. Мы рисуем одну линию вверх и одну линию вниз, а затем мы их штрихуем. Так мы поступаем со всеми линиями. Сохраняем. Возвращаемся в браузер, обновляем страницу, и мы видим, что сейчас у нас нарисованы все объединения линий. Вот круглое присоединение линий, вот прямо здесь присоединение под наклоном, а вот здесь присоединение под скосом. Присоединение под скосом (miter) идет вот до этой точки, где линии встречаются. Лимит свойства miter контролирует коэффициент, чтобы присоединение со свойством miter не было обрезано и стало как присоединение со свойством bevel.

По умолчанию это 10. Давайте вернемся и немного с этим поиграем. Давайте установим miterLimit на 20, сохраняем, обновляем страницу. Никакого результата. Давайте еще попробуем. Снижаем до 5, обновляем. А теперь давайте снизим до 1. Вы видите, что если miterLimit установлен на достаточно низкое число, miter обрезается и становится bevel.

Вот так используется miterLimit. Все верно! В этом примере вы увидели, как рисовать линии разной ширины, с разными окончаниями, с разными стилями присоединения.