HTML5 canvas. Рисование в html5


Содержание материала:

HTML 5 Canvas для начинающих

Спецификация HTML 5 включает множество новых функций, одной из которых является тег canvas . HTML 5 Canvas (канва HTML 5) предоставляет простой и мощный способ вывода графики и рисования с использованием JavaScript. Для каждого элемента canvas можно использовать контекст, в котором нужно вызвать команды JavaScript для рисования на Canvas. Браузеры могут реализовывать несколько контекстов элемента canvas и предоставлять различные API для рисования. Следует также помнить, что рисование происходит в растровой форме, то есть, нарисовав на канве какую-либо фигуру, её нельзя будет изменить или удалить отдельно, — можно только стереть целую область канвы.

Большинство современных браузеров предоставляют возможности 2D-контекста (2D Canvas) — Opera, Firefox, Konqueror и Safari. Кроме того существуют экспериментальные сборки браузера Opera, которые включают поддержку 3D-контекста (3D Canvas), а также дополнение к Firefox, которое реализует поддержку 3D Canvas:

В этой статье вы узнаете, как использовать 2D-контекст элемента canvas , основные функции для работы с canvas , включая линии, примитивы фигур, изображения, текст и другие возможности. При изложении материала статьи предполагается, что вы владете основами JavaScript на достаточно высоком уровне.

Основы использования Canvas

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

Нужно добавить идентификатор к элементу canvas , чтобы потом обратиться к нему в JavaScript, также необходимо задать атрибуты width и height для определения ширины и высоты элемента canvas .

Для рисования внутри элемента canvas , нужно использовать JavaScript. Сначала нужно найти созданный тег canvas с помощью функции getElementById , а потом инициализировать нужный контекст. Как только это будет сделано, можно начинать рисование на канве, используя доступные API-команды выбранного контекста. Следующий скрипт рисует простой прямоугольник на канве (просмотреть пример использования Canvas):

Canvas 2D API

Заливки и границы фигур

С помощью свойств fillStyle и strokeStyle вы можете легко настроить цвета, используемые для заливки и линий объектов. Значения цветов, используемые в этих методах, такие же как и в CSS: шестнадцатеричные коды (#F5E6AB), rgb(), rgba() или даже hsla(), если браузер поддерживает такой способ задания цвета (например, он поддерживается в Opera 10.00 и более новых версиях).

Используя метод fillRect , вы можете нарисовать прямоугольник с заливкой. С помощью метода strokeRect вы можете нарисовать прямоугольник только с границами, без заливки. Если нужно очистить некоторую часть канвы, вы можете использовать метод clearRect . Три этих метода используют одинаковый набор аргументов: x, y, width, height. Первые два аргумента задают координаты (x,y), а следующие два — ширину и высоту прямоугольника.

Для изменения толщины линий можно использовать свойство lineWidth . Пример использования функций fillRect, strokeRect, clearRect:

Этот пример приведет к следующему результату:

Окружность и круг

Чтобы нарисовать окружность, нужно выполнить такой код:

Кривые Безье

Для создания кривых Безье в HTML5 Canvas можно использовать метод bezierCurveTo() . Кривые Безье задаются с помощью начальной точки, двух контрольных точек и конечной точки. В отличие от квадратичных кривых, кривые Безье в HTML 5 Canvas определяются двумя контрольными точками вместо одной, позволяя создавать кривые с более сложным очертанием.

Метод bezierCurveTo() выглядит следующим образом :

Пример рисования кривой Безье в HTML 5 Canvas:

Исполнение такого кода приведет к следующему результату:

Схема построения кривой Безье:

Контуры

Контуры Canvas позволяют рисовать фигуры любой формы. Сначала нужно нарисовать «каркас», а потом можно использовать стили линий или заливки, если это необходимо. Чтобы начать рисование контура, используется метод beginPath() , потом рисуется контур, который можно составить из линий, кривых и других примитивов. Как только рисование фигуры окончено, можно вызвать методы назначения стиля линий и заливки, и только потом вызвать функцию closePath() для завершения рисования фигуры.

Следующий код демонстрирует рисование треугольника:

Этот пример будет отображен в браузере следующим образом:

Вставка изображений в Canvas

Метод drawImage позволяет вставлять другие изображения ( img и canvas ) на канву. В браузере Opera также существует возможность рисования SVG-изображений внутри элемента canvas . drawImage довольно сложный метод, который может принимать три, пять или девять аргументов:

  • Три аргумента: Базовое использование метода drawImage включает один аргумент для указания изображения, которое необходимо вывести на канве, и два аргумента для задания координат.
  • Пять аргументов: Используются предыдущие три аргумента и еще два, задающие ширину и высоту вставляемого изображения (в случае если вы хотите изменить размеры изображения при вставке).
  • Девять аргументов: Используются предыдущие пять аргументов и еще четыре: два для координат области внутри исходного изображения и два для ширины и высоты области внутри исходного изображения для обрезки изображения перед вставкой в Canvas.

Спецификация HTML 5 объясняет эти аргументы следующим образом:

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

Так будет выглядеть этот пример в браузере:

Манипуляции над пикселями

2D Context API предоставляет три метода, которые позволяют выполнять попиксельное рисование: createImageData , getImageData и putImageData .

Пиксели хранятся в объектах типа ImageData . Каждый объект имеет три свойства: width , height и data . Свойство data имеет тип CanvasPixelArray и содержит массив элементов размером width*height*4 байт; это означает, что каждый пиксель содержит цвет в формате RGBA. Пиксели упорядочены слева направо, сверху вниз, построчно.

Чтобы лучше понять этот механизм, рассмотрим пример отрисовки блока из красных пикселей.

Примечание: пока не все современные браузеры реализуют метод createImageData . В таких браузерах необходимо получать объект ImageData , используя метод getImageData (Пример кода для таких браузеров).

Благодаря возможностям метода ImageData можно сделать очень многое. Например, можно отфильтровать изображение или создать математическую визуализацию (фракталы и т.п.). Следующий код показывает, как создать простой фильтр для инвертирования цвета изображения:

Ниже изображен результат работы фильтра инверсии цвета, примененного к изображению.

Текст

В настоящее время Text API доступен только в последних сборках движка WebKit, а также в Firefox 3.1 и выше.

Следующие свойства текста доступны для объекта контекста:

  • font : Определяет шрифт текста, так же как свойство font-family в CSS)
  • textAlign : Определяет горизонтальное выравнивание текста. Допустимые значения: start, end, left, right, center. Значение по умолчанию: start.
  • textBaseline : Определяет вертикальное выравнивание текста. Допустимые значения: top, hanging, middle, alphabetic, ideographic, bottom. Значение по умолчанию: alphabetic.

Существуют два метода для вывода текста: fillText и strokeText . Первый отрисовывает текст, заполняя его заливкой стиля fillStyle , другой рисует обводку текста, используя стиль strokeStyle . Оба метода принимают три аргумента: собственно текст и координаты (x,y), в которых его необходимо вывести. Также существует четвертый необязательный аргумент — максимальная ширина. Этот аргумент необходим для умещения текста в заданную ширину.

Свойства выравнивания текста влияют на позиционирование текста относительно координат его вывода (x,y).

Так этот пример будет выглядеть в браузере:

Shadow API предоставляет четыре свойства:

  • shadowColor : Определяет цвет тени. Значения допустимы в том же формате, что и в CSS.
  • shadowBlur : Определяет степень размытия тени в пикселях. Эффект очень похож на гауссово размытие в Photoshop.
  • shadowOffsetX и shadowOffsetY : Определяет сдвиг тени в пикселях (x, y).

Так будет выглядеть пример тени в браузере:

Градиенты

Свойства fillStyle и strokeStyle также могут иметь объекты CanvasGradient вместо обычных цветов CSS — это позволяет использовать градиенты для линий и заливок.

Для создания объектов CanvasGradient можно использовать два метода: createLinearGradient и createRadialGradient . Первый метод создает линейный градиент, а второй — радиальный градиент.

Как только создан объект градиента, можно добавлять в него цвета с помощью метода addColorStop .

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

Ниже показан более сложный пример, в котором использованы линейный градиент, тени и текст:

Примеры использования Canvas

Следующие проекты реализуют множество разных возможностей Canvas:

Выводы

Canvas — одна из самых интересных возможностей HTML 5, которую уже можно использовать во многих современных браузерах. Canvas предоставляет возможности для создания игр и пользовательских интерфейсов совершенно нового уровня. 2D context API включает в себя множество функций, часть из которых не была описана в этой статье, но я надеюсь, вы получили все знания, необходимые для начала работы с Canvas.

Урок 5 HTML5 Холст, Рисование, Графика

Элемент canvas (холст) используется для рисования графики на веб странице.

Что Такое Холст?

HTML5 элемент canvas использует JavaScript для рисования графики на веб странице.

Холст — это прямоугольная площадь, и вы можете контролировать каждый пиксел на ней.

Элемент canvas имеет несколько методов для рисования траекторий, прямоугольников, окружностей, символов и добавления изображений.

Создание Элемента Холст

Добавьте элемент canvas к странице HTML5.

Укажите идентификатор id, ширину width, и высоту height для элемента:

Рисуйте с Помощью JavaScript

Сам по себе элемент canvas не имеет возможностей рисования. Все рисование должно выполняться в скрипте:

JavaScript использует идентификатор id, чтобы найти элемент canvas:

var c=document.getElementById(«myCanvas»);

Затем создается объект контекста:

var cxt=c.getContext(«2d»);

Объект getContext(«2d») — это встроенный в HTML5 объект с многочисленными методами для рисования траекторий, прямоугольников, окружностей, символов и много другого.

Следующие две строки рисуют красный прямоугольник:

cxt.fillStyle=»#FF0000″;
cxt.fillRect(0,0,150,75);

Метод fillStyle делает его красным, а метод fillRect указывает форму, положение и размер прямоугольника.

Координаты

Метод fillRect выше имеет параметры (0,0,150,75).

Это означает: Нарисовать прямоугольник размером 150×75 на холсте, начиная с левого верхнего угла (0,0).

Координаты холста X и Y используются для позиционирования рисуемых фигур на холсте.

Переместите мышь над прямоугольником ниже, чтобы увидеть координаты:

X
Y

Еще Примеры Работы с Холстом

Ниже приведены дополнительные примеры рисования на элементе canvas:

Пример — Линия

Рисует линию, указывая где начать и где остановиться:

Пример — Круг

Рисует круг, задав размер, цвет и положение:

Пример — Градиент

Рисует градиентный фон с указанными цветами:

HTML5 canvas. Рисование в html5

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

Для начала добавим в наш html файл следующий код:

Теперь откроем наш JS файл и добавим в него следующее (поскольку многие переменные и функции затрагивают старые, я приведу здесь весь код целиком):

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

И еще, добавьте в тело нашего элемента canvas следующее:

Так мы уведомим пользователя, браузер которого безнадежно устарел или IE. На этом пока все. Спасибо за внимание!

Учим HTML5 Canvas за 30 минут

Сегодня будет легкий, но классный урок. Мы познакомимся с HTML 5 Canvas.

С помощью Canvas Вы сможете создавать интересные эффекты на странице, разрабатывать игры и полезные графические инструменты. При этом всем работа с HTML 5 Canvas осуществляется посредством языка программирования JavaScript, но там все очень просто. Его поддержка радует во всех смыслах, так как Canvas поддерживается практически везде, даже на старых версиях Internet Explorer.

Соответственно мы разберем работу с самим тегом Canvas, поговорим о его особенностях и нарисуем простейшие графические примитивы, такие как квадрат, круг, треугольник. Затем с полученными знаниями разработаем простенькую программу, позволяющую рисовать, а затем на автомате воспроизводить рисунок. Такая штука раньше была очень популярна на Facebook.

Поехали!

Для начала создадим обычную структуру HTML документа и разместим тег Canvas. Напишем между тегами текст, который будет отображаться, если браузер не поддерживает Canvas. Также имеет смысл дать идентификатор >

Теперь есть смысл начинать писать наш код.

Первое, что нужно сделать в скрипте это подгрузить сам Canvas.

Далее создадим переменную, которая вообще-то называется context, но стандартно пишут ctx. Она будет хранить в себе контекст этого загруженного canvas-a. Загружается он легко, просто обращаетесь к этой переменной canv и вызываете метод getContext. Первым аргументом указываете, какой хотите контекст. Их стандартно 4, но чаще всего используется двумерный контекст, то есть 2d.

Пропишем высоту и ширину Canvas так, чтобы он отображался на всю страницу. По умолчанию его параметры 300x150px. Чтобы не появлялись полосы прокрутки необходимо прописать тегу Canvas значение display: block.

Приступим к рисованию прямоугольника!

Первое, что мы сделаем — нарисуем прямоугольник. Для этого нужно обратиться к нашему контекту, то есть к переменной ctx и указать свойство fillStyle, хотя можно этого не делать и тогда цвет у прямоугольника будет черный.

Далее вызываем метод fillRect, который отвечает за то, чтобы нарисовать непосредственно сам квадрат. Он принимает 4 аргумента: позиции по оси X и Y, на который будет начинаться наш будущий прямоугольник.

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

При этом мы можем его очень просто анимировать. Для этого создаем простую переменную, например, x, которая будет хранить расположение прямоугольника по оси X.

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

Получаем вот такой код и анимацию

Вообще-то делать анимацию в Canvas через setInterval нет особого смысла, это делается через requestAnimationFrame.

Как нарисовать прямоугольник, но не заполнять его? Чтобы у него были только border-ы. Для этого есть метод strokeRect, который принимает точно те же аргументы, что и fillRect

Топ-пост этого месяца:  Улучшение CSS для повышения скорости загрузки сайта оптимизация производительности

На выходе Вы получается вот это:


Можно обратить внимание, что цвет border-a прямоугольника не magenta. Так происходит, потому что он вызывается не через fill, а через stroke.

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

Учимся делать круг!

Круг на Canvas делается также очень просто. Для этого есть метод arc. Он принимает 6 параметров: 1 — позиция по оси x, 2 — позиция по оси y, 3 — радиус круга, 4 — начало угла (start angle), 5 — конец угла (end angle), 6 – рисовать круг по часовой стрелке или против. Последний параметр не обязательный. Start angle начинается справа, так как он задается в медианах и когда Вы указываете end angle, то указываете как далеко он пойдет.

Введение в Canvas

В этой статье мы познакомим вас c новым элементом HTML5 — canvas, который позволяет рисовать различные объекты и отображать в самых современных браузерах. Прочитав данный урок, вы узнаете, как получить доступ к элементу canvas, рисовать фигуры, изменять цвета, и стирать объекты. Приобретайте путёвку в современный мир Web технологий.

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

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

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

Когда вы слышите слово canvas, то вы сразу же думаете о новом HTML5 элементе с одноимённым названием. Технически, это только половина всей правды, но давайте не будем сейчас говорить об этом. Элемент canvas — это нововведение для всех браузеров.

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

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

Поддержка

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

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

  • Internet Explorer (9.0+)
  • Safari (3.0+)
  • Firefox (3.0+)
  • Chrome (3.0+)
  • Opera (10.0+)
  • iOS (1.0+)
  • Andro >К слову сказать, вы можете активировать данный элемент и в ранних версиях Internet Explorer при помощи данного плагина – Explorer Canvas.

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

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

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

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

Давайте расставим всё на свои места: когда мы используем элемент 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. Каковы ощущения?

Заметьте: вы скорее всего уже смекнули, что на самом деле для рисования квадрата используется JavaScript. Это происходит потому, что в функциональности элемента canvas не предусматривается подобного метода (для рисования квадрата). На самом деле квадрат — это тот же самый прямоугольник, у которого все стороны равны.

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

  • Первый — это позиция по оси x;
  • Второй — это позиция по оси y;
  • Третий — это параметр, отвечающий за ширину;
  • Четвёртый — это высота.

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

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

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

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

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

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

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

  • beginPath: начало схемы;
  • moveTo: метод для создания точки;
  • lineTo: рисует линию от точки до точки, которые были созданы методом moveTo, или до точки от прошлой линии, нарисованной методом lineTo;
  • closePath: завершить схему.
  • fill: заполнить фигуру цветом.
  • stroke: создать контур.

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

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

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

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

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

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

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

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

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

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

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

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

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

Теперь плавно перейдём от изменения цветов к изменению значения толщины линий. Для данного функционала существует ещё один метод из JavaScript API — lineWidth.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 новых сайтов, где можно скачать бесплатные фотографии для заполнения своих сайтов.

Как рисовать диаграммы с использованием JavaScript и HTML5 Canvas

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

Есть более простые способы создания диаграмм, чем писать код с нуля, например, эта полная библиотека для графиков от CodeCanyon.

Но если вы хотите знать, что происходит за кулисами в такой библиотеке, то читайте дальше.

Что такое круговая диаграмма?

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

Что такое кольцевая диаграмма?

Проще говоря, кольцевая диаграмма является вариацией круговой диаграммы. Разница в том, что срезы разрезаются по направлению к центру пирога, так что виден только обод. Таким образом, диаграмма выглядит как кольцо и, следовательно, от сюда такое имя.

Начинаем рисование с помощью Canvas

Прежде чем рисовать круговую диаграмму, мы рассмотрим ее детали. Мы увидим, как мы можем использовать компонент canvas и JavaScript чтобы нарисовать:

  • Линию
  • Дуга (часть круга)
  • Цветную форму

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

  • Одна папка для хранения файлов проекта; Давайте назовем эту папку piechart-tutorial .
  • Один HTML-файл index.html внутри папки piechart-tutorial . Этот файл будет содержать HTML-код.
  • Один JS-файл script.js внутри папки piechart-tutorial . Этот файл будет содержать наш код JavaScript.

Мы сохраним все очень просто и добавим следующий код внутри index.html :

У нас есть элемент с идентификатором myCanvas , чтобы мы могли ссылаться на него в нашем JS-коде. Затем мы загружаем JS-код через тег

Давайте порисуем

В HTML5 определён элемент как «растровый холст, который может быть использован для отображения диаграмм, игровой графики или изображений на лету». Холст — это прямоугольная область на вашей странице, где с помощью JavaScript можно рисовать что вы пожелаете.

Поддержка

iPhone
7.0+ 3.0+ 3.0+ 3.0+ 10.0+ 1.0+ 1.0+

* Internet Explorer поддерживает только с библиотекой explorercanvas. Internet Explorer 9 поддерживает .

Как же этот холст выглядит? В действительности, никак. У элемента нет собственного контента и рамки.

Код выглядит так.

Давайте добавим пунктирную рамку, чтобы увидеть, с чем мы имеем дело.

У вас может быть несколько элементов на одной странице. Каждый холст будет отображаться в DOM и хранить своё собственное состояние. Если вы добавите каждому холсту атрибут id , то можете получить к ним доступ, как и к любому другому элементу.

Расширим наш код, включив атрибут id .

Теперь легко можно обнаружить элемент в DOM.


Простые фигуры

iPhone
7.0+ 3.0+ 3.0+ 3.0+ 10.0+ 1.0+ 1.0+

* Internet Explorer поддерживает только с библиотекой explorercanvas. Internet Explorer 9 поддерживает фигуры в .

Каждый холст изначально пустой. Это скучно! Давайте что-нибудь нарисуем.

Событие onclick вызывает эту функцию:

Первая строка функции не делает ничего особенного, она просто находит элемент в DOM.

Каждый холст имеет контекст рисования, в котором и происходят все эти смешные штучки. Как только вы нашли элемент в DOM (с помощью document.getElementById() или любым другим способом), вызываете метод getContext() . Необходимо указать строку «2D» в методе getContext() .

Спроси профессора Разметкина

☞ В. Есть холст 3D?

О. Пока нет. Отдельные производители экспериментируют с собственным трёхмерным API, но ни один из них не стандартизирован. В спецификации HTML5 отмечено: «в будущих версиях данной спецификации, вероятно, будет определён 3D-контекст».

Итак, у вас есть элемент и есть контекст рисования, где определены все методы и свойства рисования. Имеется целая группа свойств и методов посвящённых рисованию прямоугольников.

  • Свойство fillStyle может быть цветом, рисунком или градиентом (подробнее о градиентах чуть ниже). По умолчанию fillStyle заливает сплошным чёрным цветом, но вы можете установить что угодно. Каждый контекст рисунка помнит свои собственные свойства при открытии страницы, пока вы её не обновите.
  • fillRect(x, y, width, height) рисует прямоугольник, заполненный текущим стилем заливки.
  • Свойство strokeStyle как и fillStyle может быть цветом, рисунком или градиентом.
  • strokeRect(x, y, width, height) рисует прямоугольник с текущим стилем линии. strokeRect не заливается внутри, он просто рисует границы.
  • clearRect(x, y, width, height) очищает от пикселей в указанном прямоугольнике.

Спроси профессора Разметкина

☞ В. Можно ли «перезагрузить» холст?

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

Вернёмся к предыдущему примеру.

Вызов метода fillRect() рисует прямоугольник и заполняет его текущим стилем заливки, исходно это чёрный цвет, пока вы его не измените. Прямоугольник задаётся левым верхним углом (50, 25), шириной (150) и высотой (100). Чтобы лучше представить как это работает, давайте посмотрим на систему координат.

Координаты холста

Холст — это двумерная сетка. Координата 0,0 находится в левом верхнем углу холста. Вдоль оси X значения растут к правому краю холста. По оси Y значения растут к нижнему краю холста.

Координатная сетка была нарисована с помощью и включает в себя:

  • набор серых вертикальных линий;
  • набор серых горизонтальных линий;
  • две чёрные горизонтальные линии;
  • две чёрные вертикальные линии;
  • две маленькие чёрные диагональные линии, которые образуют стрелки;
  • две чёрные вертикальные линии;
  • две маленькие чёрные диагональные линии, которые образуют вторую стрелу;
  • букву «х»;
  • букву «у»;
  • текст «(0, 0)» вблизи левого верхнего угла;
  • текст «(500, 375)» в правом нижнем углу;
  • точку в левом верхнем углу и другую в правом нижнем углу.

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

Также нам нужен скрипт для поиска элемента в DOM и получить его контекст рисования.

Теперь мы можем рисовать линии.

Контуры

iPhone
7.0+ 3.0+ 3.0+ 3.0+ 10.0+ 1.0+ 1.0+

* Internet Explorer поддерживает только с библиотекой explorercanvas. Internet Explorer 9 поддерживает .

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

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

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

  1. moveTo(х, у) перемещает карандаш к указанной начальной точке.
  2. lineTo(х, у) рисует линии до указанной конечной точки.

Чем чаще вы вызываете moveTo() и lineTo() , тем длиннее получается контур. Это «карандашные» методы — вы можете обращаться к ним так часто, насколько хотите, но вы ничего не увидите на холсте, пока не обратитесь к одному из «чернильных» методов.

Давайте нарисуем серую сетку.

Рисование вертикальных линий

Рисование горизонтальных линий

Все эти методы были «карандашные». На самом деле, на холсте ещё ничего не нарисовано, нам нужны «чернильные» методы, чтобы сделать рисунок видимым.

stroke() является одним из «чернильных» методов. Он принимает сложный контур, заданный всеми вызовами moveTo() и lineTo() и рисует его на холсте. strokeStyle управляет цветом линии. Вот результат.

Спроси профессора Разметкина

☞ В. Почему мы начинаем x и y c 0.5, а не с 0?

О. Представьте каждый пиксель как большой квадрат. Все целочисленные координаты (0, 1, 2, . ) являются углами этих квадратов. Если вы рисуете однопиксельную линию между целыми координатами, она будет перекрывать противоположные стороны пиксельного квадрата, в результате будет нарисована ширина два пикселя. Чтобы нарисовать линию шириной только в один пиксель, необходимо сместить координаты на 0.5 перпендикулярно к направлению линии.

К примеру, если вы попытаетесь нарисовать линию от (1, 0) до (1, 3), браузер будет рисовать линию с перекрытием в полпикселя по обе стороны от x=1. На экране невозможно отобразить половину пикселя, поэтому линия будет расширена для покрытия двух пикселей.

Если вы попробуете нарисовать линию от (1.5, 0) до (1.5, 3), браузер нарисует линию с перекрытием полпикселя на каждой стороне от x=1.5, что в результате даёт истинную однопиксельную линию.

Спасибо Джейсону Джонсону за эти графики.

Теперь нарисуем горизонтальную стрелку. Все линии и кривые на контуре нарисованы тем же цветом (или градиентом — да, мы скоро до него доберемся). Мы хотим нарисовать стрелку другим цветом — чёрным, а не серым, так что мы должны начать новый контур.

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

Не новый контур

Я сказал, что эти стрелки будут чёрными, но strokeStyle установлен как серый ( fillStyle и strokeStyle не сбрасываются, когда вы начинаете новый контур). Это нормально, потому что мы просто запустили серию «карандашных» методов. Но прежде чем нарисовать реально в «чернилах», мы должны установить strokeStyle чёрным. В противном случае эти две стрелки будут серыми и мы вряд ли их заметим. Следующие строки изменяют цвет на чёрный и рисуют линии на холсте.

Текст

iPhone
7.0+ 3.0+ 3.0+ 3.0+ 10.0+ 1.0+ 1.0+

* Internet Explorer поддерживает только с библиотекой explorercanvas. Internet Explorer 9 поддерживает текст в .

* Mozilla Firefox 3.0 требует костыль для совместимости.

В дополнение к рисованию линий на холсте, вы также можете нарисовать текст. В отличие от текста окружающей веб-страницы, здесь нет блочной модели. Это означает, что нет знакомых из CSS техник вёрстки: нет плавающих элементов, нет отступов, нет полей, нет переноса слов (хотя вы можете считать всё это хорошей вещью). Вы можете установить несколько атрибутов шрифта, выбрать точку на холсте и нарисовать текст. Следующие атрибуты шрифта доступны в контексте рисования.

  • font может содержать всё, что вы бы добавили в CSS-свойство font . Включает стиль шрифта, насыщенность, размер, межстрочное расстояние и семейство гарнитур.
  • textAlign управляет выравниванием текста. Похоже на CSS-свойство text-align , но не идентично ему. Возможные значения: start , end , left , right и center .
  • textBaseline говорит, где рисуется текст относительно начальной точки. Возможные значения: top , hanging , middle , alphabetic , ideographic и bottom .

Атрибут textBaseline хитрый, потому что сам текст такой (к тексту на английском это не относится, но вы ведь можете нарисовать любой символ Юникода и сам Юникод хитрый). Спецификация HTML5 объясняет различия между базовыми линиями.

Верх площадки em (top) это примерно верх глифов в шрифте; выносная базовая линия (hanging) там, где привязаны некоторые глифы вроде आ; середина (middle) это половина между верхом и низом площадки em; алфавитная базовая линия (alphabetic) проходит там, где привязаны символы вроде Á, ÿ, f и Ω; идеографическая базовая линия (ideographic) располагается там, где привязаны символы вроде 私 и 達; низ площадки em это примерно низ глифов в шрифте. Верх и низ ограничивающего прямоугольника может быть далеко от базовой линии из-за того, что глифы выходят далеко за пределы прямоугольника em.

Для простых алфавитов вроде английского вы можете без опасений придерживаться значений top , middle или bottom у свойства textBaseline .

Давайте нарисуем какой-нибудь текст! Текст внутри холста наследует размер шрифта и стиль самого элемента , но вы можете переопределить эти значения, установив свойства шрифта в контексте рисования.

Изменение стиля шрифта

Метод fillText() рисует собственно текст.

Спроси профессора Разметкина

☞ В. Могу я использовать относительные размеры шрифтов для рисования текста на холсте?

О. Да. Как и любой другой HTML-элемент на странице, сам вычислит размер шрифта на основе правил CSS. Если вы установите свойство context.font на относительный размер шрифта, такой как 1.5em или 150%, ваш браузер умножит его на вычисленный размер шрифта самого элемента .

Для текста в левом верхнем углу, скажем, хочу, чтобы верх текста был при y=5. Но я ленивый, не хочу измерять высоту текста и вычислять базовую линию. Вместо этого я установлю textBaseline как top и укажу координаты левого верхнего угла окружающего текст прямоугольника.

Теперь текст в правом нижнем углу. Скажем, я хочу в правом нижнем углу текст, который будет в точке с координатами (492, 370) — это всего несколько пикселей от правого нижнего угла холста — но я не хочу измерять ширину или высоту текста. Я могу установить textAlign как right и textBaseline как bottom , а затем вызвать fillText() с координатами правого нижнего угла прямоугольника ограничивающего текст.

И вот результат:

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

Рисуем две «точки»

И это весь написанный текст! Вот финальный результат.

Градиенты

iPhone
Линейный 7.0+ 3.0+ 3.0+ 3.0+ 10.0+ 1.0+ 1.0+
Радиальный 9.0+ 3.0+ 3.0+ 3.0+ 10.0+ 1.0+ 1.0+

* Internet Explorer 7 и 8 поддерживает только с библиотекой explorercanvas. Internet Explorer 9 поддерживает градиенты .

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

Разметка выглядит так же, как любой другой холст.

Вначале мы должны найти элемент и его контекст рисования.

После того как мы задали контекст, можем определить градиент. Градиент это плавный переход между двумя или более цветами. Контекст рисования холста поддерживает два типа градиента:

  1. createLinearGradient(x0, y0, x1, y1) рисует вдоль линии от (x0, y0) до (x1, y1);
  2. createRadialGradient(x0, y0, r0, x1, y1, r1) рисует по конусу между двумя окружностями. Первые три параметра определяют начальную окружность с центром (x0, y0) и радиусом r0. Последние три параметра представляют последнюю окружность с центром (x1, y1) и радиусом r1.

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

Создание градиентного объекта

Поскольку значения у второго и четвёртого параметра равны 0, этот градиент будет заполнен слева направо.

После того как мы получили градиентный объект, мы можем определить цвета градиента. Градиент имеет два или более цвета остановки, которые могут быть в любом месте вдоль градиента. Чтобы добавить цвет остановки, необходимо указать его позицию вдоль градиента, она может быть от 0 до 1.

Давайте определим градиент от чёрного цвета к белому.

Определение градиента не рисует что-либо на холсте, это просто объект, спрятанный где-то в памяти. Чтобы нарисовать градиент, установите fillStyle в градиент и нарисуйте фигуру вроде прямоугольника или линии.

Стиль заполнения градиентом

И вот результат.

Предположим, вы хотите получить градиент сверху вниз. Когда вы создаёте градиентный объект, оставьте значения x (первый и третий параметры) постоянными и сделайте значения y (второй и четвертый параметры) в диапазоне от 0 до высоты холста.

Значения x равны 0, значения y меняются

И вот результат:

Вы также можете сделать градиент по диагонали.

Оба значения x и y меняются

Изображения

Поддержка

iPhone
7.0+ 3.0+ 3.0+ 3.0+ 10.0+ 1.0+ 1.0+

* Internet Explorer поддерживает только с библиотекой explorercanvas. Internet Explorer 9 поддерживает изображения в .

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

  • drawImage(image, dx, dy) принимает изображение и выводит его на холсте. Заданные координаты (dx, dy) соответствуют левому верхнему углу изображения, координаты (0, 0) выводят изображения в левом верхнем углу холста.
  • drawImage(image, dx, dy, dw, dh) принимает изображение, масштабирует его до ширины dw и высоты dh и выводит в точке с координатами (dx, dy).
  • drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) принимает изображение, обрезает его до прямоугольника (sx, sy, sw, sh), масштабирует до размеров (dw, dh) и выводит в точке с координатами (dx, dy).

Спецификация HTML5 поясняет параметры drawImage() :

Исходный прямоугольник — это прямоугольник (в пределах исходного изображения), у которого углы это четыре точки (sx, sy), (sx+sw, sy), (sx+sw, sy+sh), (sx, sy+sh).

Прямоугольник назначения это прямоугольник (в холсте), у которого углы это четыре точки (dx, dy), (dx+dw, dy), (dx+dw, dy+dh), (dx, dy+dh).

Чтобы нарисовать изображение на холсте, у вас должно быть изображение. Это может быть существующий элемент или вы можете создать объект Image() через JavaScript. В любом случае вы должны убедиться, что изображение полностью загружено, прежде чем его можно нарисовать на холсте.

Если вы используете существующий элемент , то можете смело нарисовать его на холсте через событие window.onload .

Если вы создаёте объект полностью на JavaScript, то можете спокойно нарисовать изображение на холсте во время события Image.onload .

Использование объекта Image()

Необязательные третий и четвертый параметры в методе drawImage() управляют масштабом изображения. То же самое изображение масштабировано до половины его ширины и высоты и повторяется с разными координатами в пределах одного холста.

Вот скрипт который производит «многокошачий» эффект.

Все эти усилия вызывает законный вопрос: почему вы хотите рисовать изображение в первую очередь на холсте? Что дают дополнительные сложности при выводе изображения на холсте по сравнению с элементом или некоторыми правилами CSS? Даже «многокошачий» эффект может быть сделан с десятью перекрывающимися элементами .

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

Применение HTML5-элемента canvas для визуализации данных

Продукты и технологии:

HTML5, Internet Explorer, Modernizr

В статье рассматриваются:

  • HTML5-элемент canvas;
  • рисование линий, фигур и текста;
  • работа с цветами и градиентами;
  • работа с изображениями;
  • использование поли-заполнения canvas.

На заре Web, когда она представляла собой чуть большее набора статического текста и ссылок, рос интерес к поддержке других типов контента. В 1993 году Марк Андреессен (Marc Andreessen) — создатель браузера Mosaic, который впоследствии развился в Netscape Navigator, — предложил тег IMG в качестве стандарта для встраивания изображений в текст на странице. Вскоре после этого тег IMG стал стандартом де-факто для добавления графических ресурсов в веб-страницы — этот стандарт используется и сегодня. Вы могли бы даже выдвинуть аргументы в пользу того, что по мере эволюции Web документов в Web приложений тег IMG становится еще важнее, чем раньше.

В целом, медийная информация определенно приобрела более важное значение, и, хотя требования к ней в Web претерпели изменения за прошедшие 18 лет, изображения остались статическими. Веб-авторы стали все чаще использовать динамическую медийную информацию, такую как аудио/видео и интерактивные анимации, на своих сайтах и в приложениях, и до недавних пор основным решением было применение плагина вроде Flash или Silverlight.

Теперь с появлением HTML5 медийные элементы в браузере получают новый импульс для развития. Вероятно, вы слышали о новых тегах Audio и Video, которые позволяют оперировать соответствующим контентом в браузере безо всяких плагинов. (Подробно об этих элементах и их API я расскажу в следующей статье.) Возможно, вы также слышали об элементе canvas — поверхности для рисования с богатым набором JavaScript API-функций, позволяющих «на лету» создавать изображения и анимации и манипулировать ими. То, что делал IMG для статического графического контента, canvas потенциально может делать для динамического контента, управляемого скриптами.

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


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

Знакомство с HTML5-элементом canvas

Согласно W3C-спецификации HTML5 (w3.org/TR/html5/the-canvas-element.html), элемент canvas «предоставляет скрипты с растровым холстом, зависимым от разрешения, который можно использовать для рендеринга графов, игровой графики или других изображений на лету». Элемент canvas на самом деле определен в двух спецификациях W3C. Первое определение содержится в базовой спецификации HTML5, где сам элемент определен очень детально. Эта спецификация описывает, как использовать canvas, как получить его контекст рисования, API для экспорта содержимого canvas и соображения по безопасности для поставщиков браузеров. Второе определение — HTML Canvas 2D Context (w3.org/TR/2dcontext), о котором мы поговорим чуть позже.

Приступить к работе с canvas не сложнее, чем добавить элемент в HTML5-разметку, например:

Визуализация данных с помощью HTML5 Canvas и SVG

(Обзорная статья по следам конференции по разработке ПО в Екатеринбурге и другим выступлениям. Видео-версию доклада в Екатеринбурге см. на techdays.ru)

Что такое HTML5 Canvas и SVG?

HTML5 Canvas

– элемент представляет собой холст для отрисовки растровой графики. Фактически, это пустой блок заданных размеров, на котором можно рисовать с помощью специальных API для JavaScript.

API включает в себя 45 специальных методов и 21 атрибут, используемые для отображения графических примитивов, задания стилей, трансформаций, доступа к отдельным пикселям, проецирования изображений и видео.

Сам элемент определен непосредственно в спецификации HTML5. API для него описывается отдельным документом — HTML Canvas 2D Context.

SVG = Scalable Vector Graphics. Отдельный стандарт для векторного описания изображений, базирующийся на XML, имеющий свою DOM (Document Object Model) для работы через JavaScript.

В настоящий момент актуальная версия стандарта – SVG 1.1 проходит процесс обновления до второй редакции и буквально совсем недавно эта спецификация достигла статуса Proposed Recommendation.

В рамках HTML5 определен специальный тег в дополнение к вставке в виде изображений и объектов:

позволяющий делать inline-вставку SVG-контента непосредственно в тело документа (и в этом виде с ним можно работать в том же контексте JavaScript, что и с другими элементами документа).

Примеры

Несколько примеров того, что позволяют сделать Canvas и SVG:

Endless Mural

То, что называется, generative art – динамичная генерация графических изображений (http://www.endlessmural.com/).

Music Can Be Fun

Красивая музыкально-графическая игра-визуализация (http://musiccanbefun.edankwan.com/).

Примеры схем на SVG

Схема человеческого скелета, переодических система химических элементов и респираторная система (http://ie.microsoft.com/testdrive/Graphics/RealWorldDataAndDiagrams/Default.xhtml).

Карты Яндекс

Более близкий пример из реальной жизни – при отрисовке маршрутов используется SVG (если браузер поддерживает). См. также доклад “Карты и SVG” с нашего HTML5 Camp.

Еще примеры:

  • Beauty of the Web http://www.beautyoftheweb.com/ – реальные сайты из реального мира
  • Dev: unplugged http://contest.beautyoftheweb.com/ – проекты-участники соревнования приложений на HTML5

Разница между Canvas и SVG

В различных сценариях для динамичной отрисовки графики может лучше подходить или Canvas или SVG – к этому вопросу мы еще вернемся в конце. А пока остановимся на ключевых различиях между одним и другим:

Доступ к отдельным пикселям (RGBA)

Доступ к отдельным элементам (DOM)

Виден только конечный растр (нельзя выделить фигуры, текст и т.п.) — плохо для Accessibility

Можно посмотреть структуру (например, вытащить весь текст)

Визуальные стили задаются при отрисовке через API

Визуальные стили задаются атрибутами, можно подключать CSS

JS API для работы с примитивами

DOM для работы с элементами

Для обновления — рисование поверх или полная перерисовка

Возможно изменение отдельных элементов

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

Легко вешаются события от мыши через DOM, обрабатываются автоматически.

Код на JS отдельно от Canvas

Внутрь можно включать JS

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

На практике, правда, уже есть ряд готовых библиотек для визуализации данных, которые частично нивелируют эти различия.

Я не буду вдаваться в основы работы с каждой из технологий, в качестве вводной рекомендую доклад Вадима Макеева (Opera) с HTML5 Camp “Динамическая графика: Canvas и SVG”.

См. также доклады MIX 2011:

Обработка изображений с помощью Canvas

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

Хорошим примером того, где это нужно, являюется задача обработки/анализа изображений.

Анализ видео-изображения

Давайте посмотрим, как с помощью Canvas можно заниматься обработкой видео. Начнем с простой задачи проектирования видео-контента на canvas-элемент.

Для решения этой задачи в Canvas есть специальный метод drawImage:

Если запустить проигрывание видео, изображение внутри canvas-элемента будет обновляться синхронно с обновлением видео:

(Стоит отметить, что это не самый лучший способ отслеживания изменения позиции внутри видео-элемента, иногда больше подходит событие timeupdate.)

Теперь, из canvas-элемента можно получить доступ к отдельным пикселям видео-изображения. Для этого мы проектирование видео перенесем на промежуточный canvas, хранящийся в памяти. Чтобы получить доступ к пикселям и записывать пиксели в canvas есть соответствующие методы getImageData и putImageData.

В качестве примера обработки видео-изображения в данном случае делается инверсия цвета пикселей по каждому из цветовых каналов.

С готовым примером можно поиграться здесь http://silverbook.ru/projects/html5datavisualization/demo2-image-processing.htm (код выполнить можно из консоли – F12 в Internet Explorer).

Библиотеки для визуализации с помощью Canvas

Переходим непосредственно к визуализации данных. С одной из библиотек для работы с Canvas (EaselJS) мы уже ранее разбирались, делая открытку к 8 марта. Если ваша (динамическая) визуализация предполагает работу со спрайтами, рекомендую обратить на нее внимание.

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

ProcessingJS

Processing.js является портом на JS знаменитой библиотеки для визуализации данных Processing. Примеры работы можно найти тут http://processingjs.org/exhibition.

Processing.js предлагает два подхода к описанию визуализации: промежуточный код, в дальнейшем разбираемый самой библиотекой (отдельным файлом или внутри страницы) и явный код на JavaScript.

Например, чтобы нарисовать фрактал множество Мандельброта, можно использовать как вариант, указанный на странице с соответствующим примером, так и такой код на JavaScript:

Попробовать самостоятельно можно здесь: http://silverbook.ru/projects/html5datavisualization/demo3-processingjs.htm (копируем код, вставляем в консоль и выполняем).

JavaScript InfoVis Toolkit (JIT)

JIT – библиотека для визуализации данных, разрабатываемая в Sencha. Некоторые примеры визуализации можно посмотреть на сайте библиотеки в разделе Demos.

Для отображения данных JIT принимает исходные значения в виде JSON:

Далее после небольшой настройки диаграммы (обратите внимание на подсказки – они выводятся поверх визуализации обычными html-блоками, с учетом стилизации в CSS):

достаточно вызвать отрисовку:

jQuery Sparklines

jQuery Sparklines – еще одна интересная библиотека, позволяющая делать мини-визуализации массивов данных, похожих на функционал Sparklines в Excel. Библиотека использует в своей работе jQuery.

Для визуализации достаточно вызвать соответствующую функцию:

В первом и последнем случаях данные указаны в коде страницы, во втором и третьем передаются при вызове функции. Попробовать самостоятельно можно тут http://silverbook.ru/projects/html5datavisualization/demo3-sparklines.htm

Визуализация на карте с помощью SVG

Переходим к SVG и начнем с простого примера. Представьте себе, что вам нужно отобразить какие-то данные на карте регионов, как это сделать проще всего?

Если у вас есть готовая карта в виде SVG (я взял карту России с сайта Википедии), то это делается очень просто – достаточно, чтобы внутри SVG-документа у каждого региона был свой уникальный id, далее вставляем карту как inline svg и простым кодом раскрашиваем в нужный цвет:

Если сделать все то же самое в цикле, то уже можно раскрасить не просто область, но и целый регион или даже всю страну:

Библиотеки для визуализации данных с помощью SVG

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

Примеры с Canvas мы уже посмотрели, давайте теперь посмотрим на несколько библиотек для работы с SVG. (Это также не исчерпывающий список, но довольно качественные и популярные решения.)

Raphaël

Raphaël – известная библиотека для работы с SVG, написанная Дмитрием Барановским. Помимо того, что она просто делает жизнь легче, она интересная также тем, что в старых версиях IE реализует свой функционал с помощью VML.

Оставляя за рамками данной статьи вопросы работы с самой библиотекой (в качестве интересного десерта, вот здесь http://raphaeljs.com/icons/ можно найти библиотеку векторных иконок для Raphaël), перейдем к расширению для работы с диаграммами и графиками — http://g.raphaeljs.com/.

Чтобы добавить простую круговую диаграмму достаточно такого кода:

Несколькими дополнительными операциями можно добавить легенду, подписи к диаграмме и интерактивные подсказки:

Аналогичным образом можно выводить и другие типы диаграмм, используя соответствующие методы. См. примеры непосредственно на сайте расширения http://g.raphaeljs.com/

Highcharts JS

Наконец, еще одна интересная библиотека с богатым функционалом – Highcharts JS. Большое колиечество примеров можно найти в галерее на сайте.

API библиотеки позволяет достаточно легко сгенерировать диаграмму по данным в JSON:

Немного более сложным скриптом можно указать дополнительные детали, например, вывести легенду, настроить подсказки:

При необходимости можно заменить стили по умолчанию на свои собственные.

Что выбрать: Canvas или SVG?

Как видно из примеров выше, для задач визуализации данных зачастую подходит и та, и другая технология. Многие вещи делаются схожим образом. В случаях, где нужен попиксельный вывод, очевидно, лучше подходит Canvas. Там, где диаграмма бьется на отдельные объекты, в которых нужно поддерживать интерактивность, лучше подходит SVG.

Лучше подходит Canvas
  • Редактирование растровой графики
  • Наложение эффектов на графику/видео
  • Генерирование растровой графики (визуализация данных, фракталы, графики функций)
  • Анализ изображенией
  • Игровая графика (спрайты, фон и т.п.)
Лучше подходит SVG
  • Масштабируемые интерфейсы
  • Интерактивные интерфейсы
  • Диаграммы, схемы
  • Векторное редактирование изображений

В графической форме это можно представить так:

Наконец, еще один важный срез, который также важно учитывать в выборе технологии – производительность отрисовки при использовании Canvas и SVG:

На практике Сanvas лучше работает при небольших размерах области отрисовки и на большом числе объектов, в SVG лучше подходит при необходимости масштабирования или вывода на большой экран и на не слишком большом количестве выводимых за раз объектов.

Рисуем в canvas

Чтобы что-то нарисовать в HTML элементе , необходимо воспользоваться JavaScript:

Шаг 1: Найдем элемент

Прежде всего мы должны найти нужный нам элемент . Для этого используется метод HTML DOM getElementById():

Шаг 2: Создадим рисующий объект

Во-вторых, нам нужно в элементе создать рисующий объект. Метод getContext() позволяет создать нужный HTML объект со свойствами и методами для рисования:

Шаг 3: Рисуем нужную графику

И наконец, теперь мы можем что-то нарисовать.

Устанавливаем стиль заливки графического объекта в красный цвет:

Свойство fillStyle может принимать значение CSS цвета, градиента или шаблона (паттерна). По умолчанию свойству fillStyle установлен черный цвет.

Метод fillRect(x,y,width,height) рисует прямоугольник:

Топ-пост этого месяца:  Вылетел из админки!
Добавить комментарий
Canvas SVG
Формат Растровый Векторный
Масштабирование
Доступ
Индексируемость и Accessibility
Стилизация
Программирование
Обновление
События
Интеграция кода