Что такое canvas элемент

Canvas

Доступ к canvas и рисование прямоугольников

Определим на веб-странице элемент canvas:

Раньше, когда стандарты HTML5 еще только начинали внедряться, обычным делом было определение внутри элемента canvas напдписи о том, что браузер не поддерживает данный элемент. И если веб-браузер не поддерживает canvas, то пользователю отображалась эта надпись. Однако в настоящее время, когда стандарты HTML5, особенно canvas повсеместно внедрены, подобные надписи уже используются скорее по инерции.

Получение контекста рисования

Все рисование на canvas производится с помощью кода JavaScript. Чтобы начать рисовать на canvas, нам надо получить его контекст:

Рисование прямоугольников

clearRect(x, y, w, h) : очищает определенную прямоугольную область, верхний левый угол которой имеет координаты x и y, ширина равна w, а высота равна h

fillRect(x, y, w, h) : заливает цветом прямоугольник, верхний леый угол которого имеет координаты x и y, ширина равна w, а высота равна h

strokeRect(x, y, w, h) : рисует контур прямоугольника без заливки его каким-то определенным цветом

Теперь используем эти методы:

При рисовании в функции strokeRect и fillRect передаются координаты x и y верхнего левого угла прямоугольника относительно элемента canvas, а также ширина и высота прямоугольника. При этом началом координат считается верхний левый угол элемента canvas, ось X направлена вправо, а ось Y направлена вниз:

В данном случае очищается небольшая часть прмоугольника в левом верхнем углу:

Источник

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 страницы. Всё сделано очень просто, так как к основной теме статьи это не относится.

Сперва, в процессе загрузки, определяются ключевые признаки совместимости:

Источник

С чего начать работу с элементом canvas

Создание элемента Canvas

Добавление элемента Canvas

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

Визуализация холста

Изменение размеров элемента Canvas

Чтобы изменить размеры холста, добавьте атрибуты width и height непосредственно в HTML-код элемента canvas :

Как вы поймете позже, в работе с элементом canvas JavaScript есть некоторые причуды, к которым мы должны относиться терпеливо.

Добавление идентификатора для элемента canvas

Полная разметка, которая должна у вас быть на данный момент, выглядит следующим образом:

На текущий момент я не советовал бы просматривать в браузере то, что у нас получилось: вы опять увидите пустой экран. Однако сейчас мы это изменим!

Создание контента

Добавление тегов script

Доступ к элементу canvas

Получение контекста рендеринга

Вызов команд

Добавьте следующие строки кода:

После того, как сделаете это, просмотрите HTML-страницу в браузере. Если все прошло успешно, на этот раз вы увидите кое-что реальное: толстую диагональную линию синего цвета:

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

Также у нас есть код, который, задает для canvas JavaScript толщину и цвет выводимой линии:

Заключение

Источник

Введение в Canvas

Я надеюсь, вам понравится эта серия уроков. Она рассчитана на тех, кто имеет какой-то опыт работы в JavaScript, и совсем ничего не знает насчёт элемента canvas. Если вы новичок в JavaScript, не переживайте, вы приобретёте некоторые знания, прочитав данную статью.

Знакомимся с элементом Canvas

Использовать элемент canvas очень просто

Для того чтобы воспользоваться элементом canvas, необходимо просто создать соответствующий HTML тег, а затем определить ширину и высоту.

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

Поддержка

Этот элемент только для самых современных браузеров

Должен отметить, что самые современные браузеры поддерживают данный элемент, даже последний Internet Explorer.

К слову сказать, вы можете активировать данный элемент и в ранних версиях Internet Explorer при помощи данного плагина – Explorer Canvas.

Размеры элемента Canvas

В примере, расположенном выше вы уже увидели как применять атрибуты ширины и высоты: width и height. Используя CSS, вы также можете контролировать размеры canvas, как и других HTML элементов. И это вполне логично. Однако так как canvas использует в своём функционале так называемый двумерный контекст, то при применении CSS к размерам холста, приведёт к тому, что все внутренние элементы будут искажены.

Немного о двумерном контексте

Давайте расставим всё на свои места: когда мы используем элемент canvas, то фактически он не помещается на страницу. Вместо него вы получаете рисунок, который формируется в двумерном контексте, а доступ к этому рисунку осуществляется как раз через элемент canvas благодаря JavaScript API. В принципе кому-то эта информация может показаться лишней, однако лишние знания вам не повредят.

Система координат

Если вы когда-либо работали с языками, имеющими дело с 2d графикой (такими как ActionScript, Processing, и т.д.), тогда вы знаете всё о системах координат, основанных на движении. Двумерный контекст в элементе canvas ничем не отличается от перечисленных систем. Он использует стандартную систему координат Cartesian, с начальной точкой (0, 0), расположенной с левой верхней стороны. Движение вправо будет увеличивать значение объекта по оси x, в то время как движение вниз, будет увеличивать значения точек объекта по оси y. Всё довольно примитивно.

Одна единица данной системы координат равняется одному пикселю вашего экрана (в большинстве случаев).

Получение доступа к двумерному контексту

Для того чтобы получить доступ к двумерному контексту, вам понадобится применить JavaScript API. В данном случае, вам потребуется функция getContext. Пример:

Заметьте: в этом примере мы применяем jQuery, но только после того, как страница полностью загрузится. Для этих целей вы можете в полной мере пользоваться вашим любимым JavaScript фрэймворком или поместить скрипт в конец документа.

В результате вызова метода getContext, переменная ctx теперь будет ссылаться на двумерный контекст. Это означает, что теперь при помощи этой переменной вы можете начать рисовать фигуры на элементе canvas. Круто, да?!

Рисуем квадраты

Теперь, когда у нас есть доступ к двумерному контексту, вы можете смело начинать пользоваться всеми функциями вышеупомянутого API. Одной из самых часто используемых функций является fillRect, которая создаёт квадраты чёрного цвета (по умолчанию).

Добавьте следующий код, используя переменную ctx, о которой мы говорили перед этим:

Этот код нарисует чёрный квадрат в левой верхней стороне холста. Примерно вот так вот:

Поздравляю! Вы только что нарисовали вашу первую фигуру в HTML5 элементе canvas. Каковы ощущения?

В методе fillRect может быть прописано 4 параметра:

Если расписать прототип метода в псевдокоде, то он будет выглядеть следующим образом:

Хорошая новость заключается в том, что вы не ограничены в функционале, касающемся заливки. Уточню. Вы можете рисовать прямоугольник с прозрачной заливкой и цветной рамкой.Для этого в JavaScript API предусмотрена специальная функция strokeRect:

Данная функция принимает такой же набор аргументов, как и fillRect. В результате вы получите ещё один квадрат:

Просто. Элегантно. И ещё раз просто! Теперь вы поняли принцип, по которому работает элемент canvas. Все остальные методы подобны этим двум. Их использовать так же просто. Если вам кажется это чем-то примитивным, то не переживайте. Все эти элементы в совокупности могут творить чудеса.

Рисование по схеме

Помимо прямоугольников (которые могут быть нарисованы одним методом из API), вы так же можете рисовать фигуры по собственной схеме. Благодаря схемам вы можете создавать прямые или изогнутые линии, а так же более сложные фигуры.

Чтобы создать полноценную схему, вам необходимо будет воспользоваться следующими методами из API:

Попробуйте следующий пример:

Данный код нарисует треугольник чёрного цвета:

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

Стоит сказать об этом именно сейчас: рисование по схеме применяется для создания более сложных фигур чем прямоугольники.

Изменение цветов

Итак, всё что мы рисовали до сих пор, будь то прямоугольник или треугольник, окрашивалось в чёрный цвет. Круто! Однако, существует множество функций в JavaScript API, которые позволят вам с лёгкостью изменить цвет фигуры, которую вы рисуете. Вашему вниманию представляю fillStyle и strokeStyle.

Объявлять тут в принципе нечего, поэтому давайте сразу же применим их на практике:

Данный код окрасит квадрат в красный цвет:

Или вы можете изменить цвет рамки квадрата:

Вот вы и научились применять данные методы:

Методы fillStyle и strokeStyle удобны тем, что они используют те же цвета, что и в привычном вам CSS. Это значит, что вы можете использовать RGB, RGBA, HSA, специальные слова (“red”) и шестнадцатеричные значения.

Сразу стоит отметить, что изменение цвета не приводит к преобразованию уже существующего содержания элемента canvas. К примеру, если вы нарисовали черный прямоугольник, затем создали наполнитель для красного цвета, а потом нарисовали ещё один прямоугольник, то первая фигура останется чёрной.

Изменение толщины линий

Можете добавить данный код в прошлый пример:

И вот какой у вас получится результат:

Такой же принцип вы можете применить со схемами. К примеру, вы можете изменить пример с треугольником:

И вот что у вас получится:

Также в JavaScript API, существует ещё метод, который позволят вам изменить вид линий. К примеру, lineCap изменяет вид отображения конца линии, а lineJoin изменят отображение углов. Более подробную информацию вы можете найти в спецификации.

Стираем объекты из Canvas

Последняя вещь, которую я хочу вам сегодня показать – это стирание объектов. Вы уже знаете, как нарисовать фигуру. Теперь пришло время узнать как от неё избавиться 🙂

В принципе тут всё так же просто; вам нужно всего-навсего воспользоваться очередным методом из JavaScript API. Этот метод называется clearRect. Его задача заключается в том, чтобы сделать каждый указанный пиксель полностью прозрачным.

В этом примере на canvas 500px в ширину и 500px в высоту. Для очищения всей площади, вам необходимо сделать следующее:

В этом примере скорее всего не нужно подтверждать работу кода скриншотом, так как вы ничего не увидите. Квадрат действительно был нарисован, а затем мгновенно стёрт.

Заметьте: аргументы для метода clearRect точно такие же, как и для fillRect; x, y, ширина и высота.

Если вы не определились с высотой и шириной, то можете писать и так:

Стирание небольших фрагментов

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

На данный момент картина такая:

Вы без проблем можете стереть черный квадрат, а красный оставить на месте при помощи метода clearRect:

Заметьте, что данные должны совпадать с теми, что вы указывали при создании элемента. На самом деле данный метод просто изменяет прозрачность каждого пискеля:

Довольно-таки просто, не так ли? Вы нечасто будете стирать элементы при рисовании, однако эти знания понадобятся вам, когда мы будем учиться делать анимацию.

Идём в ногу со временем

Canvas прост в использовании и изучении

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.net.tutsplus.com/tutorials/javascript-ajax/canvas-from-scratch-introducing-canvas/
Перевел: Станислав Протасевич
Урок создан: 28 Марта 2011
Просмотров: 65992
Правила перепечатки

5 последних уроков рубрики «HTML и DHTML»

Лайфхак: наиполезнейшая функция var_export()

При написании или отладки PHP скриптов мы частенько пользуемся функциями var_dump() и print_r() для вывода предварительных данных массив и объектов. В этом посте я бы хотел рассказать вам о функции var_export(), которая может преобразовать массив в формат, пригодный для PHP кода.

17 бесплатных шаблонов админок

Парочка бесплатных шаблонов панелей администрирования.

30 сайтов для скачки бесплатных шаблонов почтовых писем

Создание шаблона для письма не такое уж простое дело. Предлагаем вам подборку из 30 сайтов, где можно бесплатно скачать подобные шаблоны на любой вкус.

Как осуществить задержку при нажатии клавиши с помощью jQuery?

К примеру у вас есть поле поиска, которое обрабатывается при каждом нажатии клавиши клавиатуры. Если кто-то захочет написать слово Windows, AJAX запрос будет отправлен по следующим фрагментам: W, Wi, Win, Wind, Windo, Window, Windows. Проблема?.

15 новых сайтов для скачивания бесплатных фото

Подборка из 15 новых сайтов, где можно скачать бесплатные фотографии для заполнения своих сайтов.

Источник