CANVAS шаг за шагом: Основы
Предварительная «настройка» нашего холста
У нашего подопытного тега есть всего два атрибута — height и width, высота и ширина соответственно, по умолчанию размер холста 150х300 пикселей.
Стоит отметить что canvas создает область фиксированного размера содержимым которого управляют контексты.
Элементарный пример:
Если сохранить эти несчастные 13 строк в файл и открыть его браузером, то можно будет увидеть область с чёрным прямоугольником, так вот это и есть тот самый холст, на котором нарисован прямоугольник размеры которого равны размерам canvas’а.
Прямоугольники
Самой элементарной фигурой которую можно рисовать является прямоугольник. Предусмотрено три функции для отрисовки прямоугольников.
Пример иллюстрирующий работу этих функций:
А теперь краткий построчный разбор:
в строках 10 и 11 мы изменили размер холста — чтоб бы задуманное нами изображение полностью отобразилось,
в строках 12 и 13 мы нарисовали два не закрашенных прямоугольника которые будут символизировать своеобразную рамку нашей «шахматной доски»,
в строке 14 отрисовываем закрашенный прямоугольник размеры которого бы позволил вместить в себе 64 квадрата с шириной стороны 32 пикселя,
в строках с 15 по 19 у нас работает два цикла которые очищают на чёрном прямоугольнике квадратные области в таком порядке что бы в итоге полученное изображение было похоже на шахматную доску
Линии и дуги
Рисование фигур составленных из линий выполняется последовательно в несколько шагов:
beginPath используется что бы «начать» серию действий описывающих отрисовку фигуры. Каждый новый вызов этого метода сбрасывает все действия предыдущего и начинает «рисовать» занова.
closePath является не обязательным действием и по сути оно пытается завершить рисование проведя линию от текущей позиции к позиции с которой начали рисовать.
Завершающий шаг это вызовом метода stroke или fill. Собственно первый обводит фигуру линиями, а второй заливает фигуру сплошным цветом.
Те кто когда-то на школьных 486х в былые годы рисовал в бейсике домик, забор и деревце по задумке учителя тот сразу поймёт часть ниже. Итак, существуют такие методы как,
Пример ниже показывает действие всего описанного выше:
В строке 14 заливается цветом дуга, в строке 22 обводится контур нашей короны.
Кривые Бернштейна-Безье
Что такое кривые Безье я думаю лучше объяснит Википедия.
Нам доступно две функции, для построения кубической кривой Бизье и квадратичной, соотвестствено:
x и y это точки в которые необходимо перейти, а координаты P(Px, Py) в квадратичной кривой это дополнительные точки которые используются для построения кривой. В кубическо кривой соответственно две дополнительные точки.
Пример двух кривых:
Добавим цвета
Что бы наше изображение было не только двух цветов, а любого цвета предусмотрено, два свойства
Цвет задается точно так же как и css, на примере все четыре способа задания цвета
Аналогично задаётся и цвет для линий.
Возьмём пример с шахматной доской и добавим в него немного цвета:
Задача
Что бы усвоить информацию и закрепить прочитанное на практике я всегда ставлю перед собой не большую цель которая бы одновременно охватывала всё прочитанное и одновременно процесс достижения которой было бы интересен мне самому. В данном случае я попытаюсь отрисовать уровень одной из моих самых любимых в детстве игр. Собственно за не имением времени — добавлять жизнь на него я не буду, а сделаю максимально понятный код охватывающий практически всё то что сегодня здесь описал.
Я воспроизвел один из уровней игры BattleCity известную у нас как Танчики, а вот и ссылка на pastebin на случай если не будет откликаться дропбокс.
На последок комментарий по примеру. В спецификациях картинки которую может выдавать Денди разрешение экрана должно быть 256×240 пикселей.
Поле боя в общеизвестнных Танчиках размером 13х13 больших блоков. Каждый из которых нарисован 4мя повторяющимися спрайтами (коих по общему подсчёту выходит на карте 26х26=676). Итак прикинем как было в оригинале по пикселам и как это правильно масштабировать. Если поделить 240 на 26 то выйдет что целая часть от деления будет 8. Получается что размерность текстуры была 8х8 пиксела т.е. размер поля боя 208х208, а большого блока 16х16. Ширина должна быть 256 пикселов. Сейчас вычислим размер правого столбца с дополнительной информацией и размер полей сверху/снизу. Справа если присмотреться ширина составляет размерность в два блока, итого 2*16=32. У нас уже 32+208=240 слева поле 16, а снизу и сверху соответственно так же по 16 пикселов. Собственно в моём примере размерность большого блока заключена в переменной cellSize, собственно все вычисления делаются иходя из её размеров. Можете по экспериментировать и поменять её значение, настоятельно рекомендую делать его кратным степеням двойки (16, 32, 64, 128. ), если хотите чтоб всё выглядело так как на старом добром денди то устанавливайте её значение равным 16. Хотя и при любых других значениях всё выглядит нормально. Если то как я пишу понравится кому-то кроме меня, то напишу продолжение, а то что в нём будет пока утаю
HTML5 Canvas: что это такое?
Что можно рисовать с помощью : арки, кривые ( их различные типы ), линии и прямоугольники. Конечно же, их можно комбинировать, и за счет этого создавать практически любые формы или объекты с различными эффектами ( прозрачность, смешивание, градиенты, тени, заливки и контуры ).
Примеры использования HTML5 Canvas
В данном примере мы сначала выводим надпись, а после нее размещаем фигуру при помощи элемента canvas : ширина и высота получились по 400, а ширина границы 10 пикселей. В результате мы получаем большой квадрат с толстым контуром.
В приведенном выше HTML canvas примере fillStyle сообщает браузеру, каким цветом нужно залить наш рисунок. Тем временем fillRect определяет местоположение и размер рисунка в рамках нашего холста, которому мы дали имя « squareCanvas «.
У вас есть четыре координаты, которые нужно заполнить. Первое число ( 125 ) сообщает браузеру, с какого количества пикселей должно начаться изображение. Если заменить цифру на 0, то изображение отобразится сначала холста. Второе число ( также 125 ) сообщает браузеру, каким будет отступ от верхней границы.
HTML5 Canvas: рисуем прямую линию
Линии рисовать еще проще. В данном примере мы снова нарисуем квадрат. После чего добавим скрипт, который нарисует прямую линию через центр холста сверху вниз:
В приведенном выше примере HTML canvas moveTo(100,0) указывает начальную точку для линии. LineTo(100,200) – это параметр, в котором мы указываем конечную точку линии. Метод stroke() позволяет указать тип заливки линии. В данном случае мы оставляем этот параметр пустым, что дает нам простую черную линию.
Но если нам нужно будет добавить еще одну линию? Мы просто добавляем координаты второй линии в следующим образом:
HTML5 Canvas: работа с текстом
Кроме фигур элемент HTML canvas также позволяет создавать тексты. Рассмотрим пример с использованием шрифта Arial в размере 32px :
Иные способы применения
Элемент HTML5 canvas также можно использовать для вставки изображений, градиентов и комплексной анимации.
HTML5: Canvas. Основы
Знакомство с новым элементом
У тега есть два атрибута — height (высота) и width (ширина). Если размеры не указать, то по умолчанию размер холста будет равен 150х300 пикселей. Canvas создает область фиксированного размера, содержимым которого управляют контексты. Атрибуты не имеют отношения к CSS, они обозначают ширину и высоту canvas в пикселях не на экране, а на координатной плоскости холста.
Не рекомендуется использовать CSS для установки высоты и ширины холста, так как в этом случае canvas подвергнется масштабированию. Задавайте размеры в элементе.
Также требуется установить обязательный идентификатор для обращению к элементу в JavaScript.
Также можно применить стиль, например, сделаем рамку вокруг холста и не будем устанавливать размеры, чтобы увидеть ширину и высоту по умолчанию.
Сейчас все современные браузеры поддерживают canvas. Если такой уверенности нет, то можно устроить небольшую проверку.
Размер холста можно вычислить программно через свойства canvas.width и canvas.height.
Первый пример
Настройки цвета и размера
Стили для заливки и обводки имеют глобальный параметр. Если вы задали какое-то свойство, то оно применится для всех элементов, если не был после этого изменен. Например, мы сначала задали зелёный цвет для заливки и синий для обводки. Если после этого мы нарисуем несколько фигур, то они все будут иметь зелёный фон и синюю обводку.
За заливку отвечает свойство fillStyle. По умолчанию для заливки используется чёрный цвет. За цвет и стиль обводки отвечает свойство strokeStyle.
Цвет задается точно так же как и в CSS (четыре способа)
Прямоугольники
Начнем с прямоугольника. В canvas есть два вида прямоугольников — залитые и незалитые (обводка). Предусмотрены три функции для рисования прямоугольников.
Функция clearRect() как бы вырезает кусок фигуры, за которым можно увидеть холст.
Нарисуем два вида прямоугольников.
Попробуйте нарисовать ещё один закрашенный прямоугольник и вырезать из него прямоугольник меньшего размера.
Каждая добавляемая фигура размещается на отдельном уровне; следующий фрагмент кода создаёт три прямоугольника со смещением в 15 пикселей, чтобы они частично наложились друг на друга.
Рисуем шахматную доску
В этом примере мы установили размер холста 300 на 300 пикселей. Далее мы нарисовали два пустых прямоугольника, которые формируют рамку вокруг нашей «шахматной доски». Далее закрашиваем внутреннюю часть рамки прямоугольником черного цвета, а затем в цикле делаем в них своеобразные квадратные «дырки», чтобы через них просвечивал белый цвет. В итоге у нас получится красивая шахматная доска.
Раскрашиваем шахматную доску
Линии и дуги
Мы можем рисовать прямые и изогнутые линии, окружности и другие фигуры. Замкнутые линии можно заливать цветом. В отличии от рисования прямоугольников, рисование линий это не одна команда, а их последовательность. Так, сначала надо объявить начало новой линии с помощью beginPath(), а в конце сказать от том, что рисование линии заканчивается с помощью closePath(). У каждого отрезка линии есть начало и конец.
beginPath используется что бы «начать» серию действий описывающих отрисовку фигуры. Каждый новый вызов этого метода сбрасывает все действия предыдущего и начинает «рисовать» снова.
closePath является не обязательным действием и по сути оно пытается завершить рисование проведя линию от текущей позиции к позиции с которой начали рисовать.
Также существуют такие методы как,
Давайте нарисуем ломаную, состоящую из двух отрезков:
Если набор отрезков будет замкнут, то у нас получится полигон, который можно залить цветом. Создадим и зальём треугольник с помощью функции fill().
Изменяем ширину линии
Значение ширины линии хранится в свойстве lineWidth контекста canvas и одна единица соответствует одному пикселю. Значение по умолчанию естественно 1.0
Стиль верхушки линий
Стиль верхушки линии хранится в свойстве lineCap и для него существуют три возможных значения:
Стиль соединения линий
Стиль соединения линий хранится в свойстве lineJoin и может принимать три возможных значения:
Мы можем ограничить длину огромного хвоста miter с помощью свойства miteLimit, которое по умолчанию принимает значение 10.
Рисуем корону
Окружности
Окружности рисуются с помощью команды arc(ox, oy, radius, startAngle, endAngle, antiClockWise), где ox и oy — координаты центра, radius — радиус окружности, startAngle и endAngle — начальный и конечный углы (в радианах) для отрисовки окружности, а antiClockWise — направление движения при отрисовке (true для против часовой стрелке, false — против). С помощью arc() можно рисовать как круги и окружности, так и дуги и части окружности.
Окружность с радиусом в 100 пикселей:
Нарисуем разноцветный круг:
Код нарисует круг, состоящий из 6 сегментов с произвольными цветами, которые будут меняться при обновлении страницы
Нарисуем дольки апельсина или арбуза, а также другие варианты с использованием собственной процедуры.
Теперь нарисуем круги из этих же фигур.
Частичная заливка окружности
Нарисуем частично залитую окружность.
Частично залитая окружность
Много кругов
Нарисуем круги в случайном порядке.
круги в случайном порядке
Закруглённые углы
Закруглённые углы рисуются при помощи функции arcto(), который содержит пять параметров.
Кривые Безье
Имеются две функции, для построения кубической и квадратичной кривой Безье:
quadraticCurveTo(Px, Py, x, y)
bezierCurveTo(P1x, P1y, P2x, P2y, x, y)
Рисуем кривые Безье
Раскрашиваем кривые Безье
Это точка на фигуре?
Функция isPointInPath(float x, float y) вернёт значение true, если точка с переданными координатами находится внутри пути. Создадим путь в виде прямоугольника и проверим:
Данный скрипт должен вывести в отладочную консоль сначала true, а затем false.
Функция clip() ничего не рисует. После её вызова любой объект будет рисоваться только в том случае, когда он находится в области на которой определён путь. Нарисуем круг и ограничим область рисования этим кругом. Затем нарисуем две линии, которые будут видны только внутри круга:
Если закомментировать вызов функции clip(), то увидим, как на самом деле рисуются линии.
Тени canvas отбрасываются всегда, просто они отбрасываются с нулевым смещением и нулевым размытием. Есть четыре свойства управляющие тенями (через знак равно указаны стандартные значения):
Возьмем предыдущий пример и посмотрим на тени
Пример с прямоугольниками.
Градиенты
Линейные градиенты
Радиальные градиенты
Нарисуем шар с псевдо-освещением
Прозрачность
Также прозрачность можно задать в атрибутах цвета:
Используем шаблоны
Кроме цветов и градиентов fillStyle и strokeStyle в качестве значения могут принимать и так называемые шаблоны. Шаблоны можно создать из того же самого canvas элемента, изображения или видео. Для примера будем использовать изображение. Шаблон создается методом createPattern(object any, string repeat), где repeat может принимать следующие значения:«repeat» (по умолчанию),«repeat-x»,«repeat-y»,«no-repeat».
Треугольник Серпинского
Рисование изображений
Чтобы нарисовать изображение, нужно создать его объект с помощью конструктора Image, затем установить путь к изображению через свойство src полученного объекта.
Прежде чем рисовать изображение, его стоит загрузить. Для этого добавим обработчик события load для объекта img, добавим его после создания объекта.
Далее можно нарисовать изображение исходного размера с помощью функции drawImage(object img, float x, float y), где указывается его верхний левый угол в точке (x;y).
Выведем изображения с разными размерами.
Нельзя вызывать метод drawImage(), если картинка не загружена в браузер. В примере я заранее вывел картинку при помощи тега img. Обычно, в подобных случаях используют вызов window.onload() или document.getElementById(«imageID»).onload.
Ваш браузер не поддерживает canvas
Рисование текста
Существуют функции рисование текста. Залитый текст рисуется через функцию context.fillText(string text, float x, float y) в точке (x;y)
Функция fillText() имеет необязательный аргумент maxWidth, который не совсем корректно работает в некоторых браузерах.
Свойство контекста font управляет стилем текста и имеет синтаксис схожий с css:
Не все атрибуты свойства font обязательно указывать. Если какой-то атрибут пропущен, то будет использоваться значение по умолчанию.
Для стилей используются следующие значения
Для веса используются значения:
Выбор шрифта зависит от поддержки браузерами, поэтому лучше использовать стандартные.
Управлять цветом мы можем через свойства fillStyle и strokeStyle.
Для рисования контуров текста применяется функции strokeText() вместо fillText().
Для выравнивания текста существует свойство textAlign, оно может принимать пять возможных значений:
Для управления линией основания текста существует свойство textBaseline, оно может принимать следующие значения:
Измерить ширину текста можно через measureText(string text). Она вернет специальный объект TextMetrics, который обладает свойством width — ширина текста в пикселях.
Комбинирование наложений
Наложение двух фигур можно осуществить при помощи свойства globalCompositeOperation, которое может принимать одно из значений.
HTML-страница на Canvas
Canvas интересный и перспективный HTML5 элемент. Он хорошо подходит как вспомогательный элемент на HTML странице, например, для отрисовки какой-нибудь простой по сюжету динамической заставки. Однако реализация функционально законченных комплексных решений с ориентацией на Canvas задача уже не такая простая.
Рабочее окружение
В качестве основного браузера используется FF (Windows, Linux Mint).
Для проверки совместимости CR и IE (Windows).
Далее — доступные гаджеты (об этом в конце).
IDE под Widows — Visual Studio Community, Notepad. Студия бесплатна, хорошо форматирует код, приемлемо делает автодобавления и находит явные ошибки (например — пропущена скобка).
IDE под Linux — gedit.
Frontend, статический сервер.
Нативный API без внешних библиотек. Отсутствие библиотек не самоцель, просто пока можно обойтись без них.
Код можно было бы запихнуть в один файл (кода не так много). Но, чтобы было понятнее, лучше его разнести по файлам:
HTML страница: html_page_on_canvas.htm
Общий код: html_page_on_canvas_main.js
Код управления моделью: html_page_on_canvas_model.js
Код управления отрисовкой на Canvas: html_page_on_canvas_canva.js
Глобальные переменные — это плохо. Без глобальной области видимости — жить трудно. В качестве компромисса создан глобальный объект APELSERG, в котором хранятся все функции и глобальные переменные:
MAIN: общие функции
MODEL: функции изменения модели
MODEL.DATA: данные модели
CANVA: функции отрисовки модели
CONFIG: глобальные переменные
Модель
В основе базовой структуры функционирования лежит классический MVC шаблон:
Роль Model выполняют данные MODEL.DATA
Роль View выполняют функции CANVA
Роль Controller выполняют функции MODEL
Приступим к реализации объектов страницы. Кому как, а мне всегда нравилось, когда на рекламных баннерах идёт снег. Хотелось бы, чтобы снег шёл по всему фону страницы. Теперь это можно реализовать. В общем-то никакой магии в этом нет — Canvas и предназначен для реализации подобного рода задач.
Каждая снежинка — это объект:
Здесь важно учесть, что возможность динамики заложена внутри объекта — изменение свойств X и Y.
Для организации снегопада создаётся массив снежинок:
Для наглядности контент тоже будет динамичным. Для этого каждая строка будет храниться как отдельный объект:
Здесь в динамику, помимо движения, заложена возможность изменения размера фонта — свойство FontHeight. Как вариант, пообъектно можно хранить отдельно слова и даже буквы. Так можно смоделировать самые разнообразные динамические визуальные эффекты.
Для контента выбраны детские стишки на зимнюю тематику:
Справедливости ради, надо сказать, что хранение контента в функции — не есть хорошо. Такой подход применяется исключительно в рамках примера. В рабочем окружении динамический контент может подгружаться, например, с веб-сервиса.
Анимация
Для анимации в современных браузерах есть специальная функция — window.requestAnimationFrame. Это типовой код её активации:
Из примера видно, что requestAnimationFrame в функциональной основе просто стартует по таймауту 60 раз в секунду. Но он хорош тем, что в отличие от setTimeout синхронизирован с циклами перерисовки браузера и умеет подстраиваться под ресурсы устройства, на котором запущен. Более подробно о requestAnimationFrame здесь.
Из недостатков следует отметить, что для центрального процессора это ресурсоёмкая задача, так как Canvas будет перерисовываться независимо от того, изменилось что-то в модели или нет. Большую модель не всегда удаётся пересчитать и отрисовать в отведённый промежуток времени.
При помощи переменной CONFIG.SET.CntHandle реализован простой механизм разделения процессов изменения модели и отрисовки по разным циклам requestAnimationFrame. Механизм не идеальный, но зато легко управляемый. Критерием качества служит субъективное зрительное восприятие: если смотрится комфортно — значит, всё нормально. Остаётся подобрать правильное значение для CONFIG.SET.CntHandle.
В примере window.requestAnimationFrame используется без обёртки совместимости. В результате получается функция управления всеми процессами анимации:
Анимация снежинок (изменение модели):
Анимация контента (изменение модели):
После изменения модели происходит её отрисовка на Canvas. Фоном может быть любое подходящее фото. Всю отрисовку выполняет одна простая функция:
Добавление функциональных кнопок и ссылок
Функциональные кнопки и ссылки — это тоже динамические объекты (похожие на снег и контент). Но динамика этих объектов не движение, а изменение цвета при наведении на них мыши или клике.
Объект описывающий команду:
Объект описывающий ссылку:
Хотя объекты по структуре похожи, для удобства восприятия они описаны как разные сущности.
При движении мыши её координаты сохраняются в глобальных переменных:
При обработке модели координаты мыши сравниваются с расположением объекта ссылки или команды:
Если курсор мыши попал на объект, то устанавливается свойство SelectName:
Похожим образом обрабатывается клик:
Если клик попал на объект, то устанавливается свойство SelectCnt:
SelectCnt задаёт количество циклов анимации, в течении которых будет подсвечиваться рамка.
После того, как было определено на каком элементе было произведено нажатие, выполнить нужную команду или перейти по ссылке уже не представляет труда.
Имеет смысл коротко описать реализацию остановки и возобновления цикла анимации.
В самом начале, цикл анимации стартует при загрузке формы (APELSERG.MAIN.Animation() в функции APELSERG.MAIN.OnLoad()). Для остановки надо просто прекратить возобновление цикла анимации по requestAnimationFrame. Остановка происходит при установке флага APELSERG.CONFIG.PROC.Stop. Применять для отмены cancelAnimationFrame, в едином цикле с requestAnimationFrame, не имеет смысла, так как при этом отменяется уже выполняющийся цикл, что бессмысленно (новый цикл всё-равно стартует). Для того, чтобы возобновить цикл анимации, надо сбросить флаг APELSERG.CONFIG.PROC.Stop и стартовать APELSERG.MAIN.Animation(). Это происходит по двойному клику мыши или «F2» на клавиатуре.
Если нажать «F1» в режиме анимации, то тоже произойдёт остановка, но уже с использованием cancelAnimationFrame и без установки флага APELSERG.CONFIG.PROC.Stop. Возобновить по двойному клику анимацию не удастся, этому будет мешать сброшенный флаг APELSERG.CONFIG.PROC.Stop. Механизм возобновления анимации, для этого случая, предусмотрен только по нажатию «F2». Остановка по «F1» добавлена специально для демонстрации механизма работы cancelAnimationFrame:
Добавление элементов управления, отвечающих за ввод данных
С элементами управления, отвечающими за ввод данных, не так всё однозначно. Простой элемент, например увеличение/уменьшение значения, можно реализовать вышеописанным способом (в примере это кнопки «+» и «-«).
Но, если вопрос стоит о полноценном элементе ввода — выпадающем списке или вводе строки данных, то реализация такой задачи в рамках Canvas, значительно усложняется.
В этом случае может помочь так называемый «гибридный» подход. То есть, для ввода данных, в дополнение к Canvas, используются стандартные HTML DOM элементы. Элементы можно создавать статически и прятать их под Canvas при помощи абсолютного позиционирования и Z индексирования. Или создавать динамически в момент ввода. В примере показано динамическое создание двух элементов ввода. Один элемент ввода располагается поверх Canvas (функция APELSERG.MAIN.ShowSettingsTextSpeed()). Другой — за пределами Canvas (функция APELSERG.MAIN.ShowSettingsThemeSelect()). Функционально оба варианта работают, но тот элемент, который располагается поверх Canvas имеет проблемы при масштабировании (Ctrl+, Ctrl-).
Динамическая адаптивность
После того, как был разработан основной пример (Снегопад), он показался не очень интересным. Поэтому пример расширен темами. Для фона тем специально были выбраны фото разных размеров, чтобы проверить и отладить динамику Canvas.
За динамику отвечает функция:
Функция работает по простому алгоритму — если фото фона меньше размера окна (с учётом элементов прокрутки), то Canvas устанавливается по размеру фото, иначе Canvas устанавливается по размеру окна.
Совместимость
Canvas (как и HTML5 в целом) элемент относительно новый и не все устройства и браузеры его поддерживают. А HTML страница должна отображаться всегда, везде и так, чтобы было удобно с ней работать. Совместимость подразумевает не только технологическую поддержку очередной новой фичи. Решающими факторами могут стать, например, размер и/или разрешение экрана, наличие элементов управления (есть только тачскрин), производительность процессора. Не до новых технологий и красот, когда основные функции выполнить нельзя.
Когда проектируется HTML страница, должны быть предусмотрены механизмы, обеспечивающие необходимый уровень совместимости. Это утверждение относится не только к HTML5 и Canvas.
В примере показан механизм другого отображения модели — в виде классической HTML страницы. Всё сделано очень просто, так как к основной теме статьи это не относится.
Сперва, в процессе загрузки, определяются ключевые признаки совместимости:
