СПОСОБЫ  И  СРЕДСТВА  ГЕНЕРАЦИИ  РАСТРОВЫХ  ИЗОБРАЖЕНИЙ  С  ИСПОЛЬЗОВАНИЕМ  HTML5  CANVAS

Ханин  Дмитрий  Андреевич

магистрант  НТУУ  «КПИ»,  г.  Киев

E-mail: 

Павловский  Владимир  Ильич

канд.  техн.  наук,  доцент  НТУУ  «КПИ»

E-mail:  kpi.pavlovsky@gmail.com

Вступление

Canvas  —  элемент  HTML5,  предназначенный  для  создания  растрового  двухмерного  изображения  при  помощи  JavaScript.  Он  может  быть  использован,  к  примеру,  для  рисования  графиков,  создания  фото-композиций,  или  для  создания  простых  (и  не  очень)  анимаций.

Canvas  впервые  был  представлен  фирмой  Apple  для  Mac  OS  X  Dashboard  и  позже  был  реализован  в  Safari.  Браузеры,  основанные  на  Gecko  1.8,  такие,  как  Firefox  1.5,  также  поддерживают  этот  новый  элемент.  Элемент  Canvas  является  частью  спецификации  WhatWG  Web  applications  1.0.

Постановка  задачи

Так  как  HTML5  все  еще  находится  в  стадии  разработки,  разработка  библиотеки  для  удобной  работы  с  Canvas  стало  актуальной  проблемой.  В  работе  рассматривается  создание  данной  библиотеки.

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

Спецификация  HTML5  Canvas  определяет  универсальный  JavaScript  API,  позволяющий  выполнять  операции  отрисовки  объектов.  Для  рисования  на  Canvas  можно  использовать  два  разных  подхода:

·       2D-подход,

·       3D-подход  (WebGL).

Первый  лучше  внедрён  и  доступен  во  всех  современных  веб-браузерах  (за  исключением  IE),  в  то  время  как  второй  находится  на  ранней  стадии  определения,  имея  лишь  несколько  экспериментальных  реализаций.

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

Мы  рассмотрим  только  2D  Canvas,  так  как  она  наиболее  широко  распространена.  2D  Canvas  позволяет  вам  использовать  мощный  API  для  выполнения  быстрых  операций  рисования  на  растровых  2D-поверхностях.  Не  существует  каких-либо  файловых  форматов,  и  вы  можете  рисовать  только  с  использованием  скриптов.  При  рисовании  не  используются  узлы  DOM  —  все  состоит  из  пикселей.  Это  означает,  что  вы  можете  сконцентрироваться  на  рисовании  без  ограничений  сложности  изображения.

Анализ  существующих  решений

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

Processing  JS

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

JavaScript  InfoVis  Toolkit  (JIT)

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

Несмотря  на  происхождение  от  JavaScript  (точнее,  от  подмножества  языка  стандарта  ECMA-262  1999  года),  формат  считается  языконезависимым  и  может  использоваться  практически  с  любым  языком  программирования.  Для  многих  языков  существует  готовый  код  для  создания  и  обработки  данных  в  формате  JSON.

jQuery  Sparklines

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

Результаты

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

Canvlib  —  стала  простой  в  использовании  библиотекой  для  рисования,  анимации  и  управления  тегами  Canvas  HTML5. 

Цель  проекта  —  поддержка  API  Canvas  HTML5  c  фреймворком  для  более  быстрой  и  удобной  разработки  приложений.  Библиотека  была  построена  по  подобию  jQuery.  Она  такая  же  простая  и  удобная  в  использовании.  Например,  вы  можете  инициализировать  стили  и  анимацию  в  одном  выражении.  Эта  библиотека  предоставляет  разработчику  много  инструментов  для  создания  растровой  графики  и  веб-приложений  используя  элемент  HTML5  Canvas.

Итак,  что  же  мы  имеем  на  сегодняшний  день?

Небольшую,  около  36  kb  (размер  версии  1.0)  в  сжатом  виде,  библиотеку,  предоставляющую  удобный  интерфейс  для  взаимодействия  с  Canvas.  Библиотека  самодостаточна,  то  есть  не  требует  подключения  никаких  дополнительных  библиотек  и  не  является  расширением  какой-либо  из  них.  Еще  стоит  упомянуть  про  то,  что:

·       На  объектах  можно  отслеживать  события  мыши,  клавиатуры  и  фокуса. 

Например:

jc.circle(x,y,radius)

  .click(function(){

  //какой-нибудь  код      

  });

·       drag'n'drop.  Для  этого  используются  draggable  и  droppable  функции,  примерно  как  в  jQuery.

·       Возможность  использовать  цепочки  методов. 

Пример:

jc.circle  (x,y,radius)

  .up  ('top')//  тут  мы  перемещаем  кружок  на  передний  план 

  .id  ('myCircle')//тут  присваеваем  id

  .name  ('myCircles');  //а  тут  присваеваем  ему  имя

·       Элементам  можно  присваивать  идентификаторы  (id)  и  имена  (name),  чтобы  затем  к  ним  обращаться  индивидуально  (в  первом  случае)  или  как  к  группе  (во  втором  случае). 

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

Jc  ('#myCircle').color  ('rgba(255,255,0,0.5)');//выбираем  элемент  по  id  и  устанавливаем  ему  цвет

Jc  ('.myCircles').color  ('rgba(255,255,0,0.5)');//выбираем  группу  элементов  по  name  и  устанавливаем  им  цвет

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

HTML  5  Canvlib  следует  использовать  для:

·Редактирования  изображений:  обрезки,  изменения  размеров,  фильтров  (удаления  эффекта  красных  глаз,  создания  эффекта  сепии,  изменения  цветности  или  яркости)

·Создания  растровой  графики:  визуализации  данных,  создания  фракталов  и  графиков  функций.

·Анализа  изображений:  создания  гистограмм  и  т.  п.

·Создания  игровой  графики,  такой  как  спрайты  и  фоны.

Когда  лучше  воздержатся  от  использования  Canvas:

·       Масштабируемые  интерфейсы

·       Интерактивные  интерфейсы

·       Диаграммы,  схемы

·       Векторное  редактирование  изображений

Для  чего  необходим  Canvas  3D?  С  помощью  Canvas  3D  можно  рисовать  3D-объекты  с  текстурами  и  шейдерами  и  анимировать  их.  Вы  можете  сделать  3D-игры  и  веб-приложения  3D-моделирования  (например,  визуализацию  продукции  —  автомобили,  запчасти  и  т.  п.).  Веб-браузер  выполняет  отрисовку  сцены  с  использованием  аппаратного  обеспечения,  если  это  возможно.  На  данный  момент  библиотека  не  поддерживает  Canvas3D,  но  не  исключает  возможность  использования  стандартного  API.

Вывод

В  ходе  проведенной  работы  были  проведены  исследования  и  анализ  существующих  способов  и  средств  генерации  изображений  с  использованием  HTML5  Canvas.  Были  выбраны  наиболее  оптимизированные  по  параметрам  скорости,  прозрачности  алгоритмизации  и  простоты  реализации  методы  построения  изображений,  что  дало  возможность  реализации  одновременно  удобной  в  использовании  и  гибкой  библиотеки  Canvlib,  которая  не  требует  подключения  никаких  дополнительных  библиотек  и  не  является  расширением  какой-либо  из  них,  и  может  использоваться  для  выполнения  быстрых  операций  рисования  на  растровых  2D-поверхностях. 

Список  литературы:

1. Steve  Fulton,  Jeff  Fulton.  HTML5  Canvas.  O'Reilly  Media.  2011.  —  560  с.
2. Jeffrey  Way.  Decoding  HTML5.  Rockable  Press,  2012.  —  343  с.
3. Jeffrey  Way.  HTML5  Fundamentals.  Envato.  2012.  —  415  с.
4. David  Flanagan.  Canvas  Pocket  Reference.  Scripted  Graphics  for  HTML5.  2010.  —  440  c.