Архив метки: PaintWeb

Подборка статей по программированию html5 Canvas

Первой попалась вот эта www.html5rocks.com/en/tutorials/canvas/integrating/. Статья с примерами кода и ссылками на открытые движки html5, в которых используются описанные технологии. Список рассмотренных вопросов:

  • как программно проверить, что canvas поддерживается браузером
  • пример создания элемента canvas
  • пример преобразования содержимого canvas в URI (img.src=»data:image/gif;base64,R0lGOD…)
  • пример сохранения data URI в локальное хранилище (local storage)
  • пример сохранения data URI на сервере через скрипт на PHP
  • примеры рисования из кода Javascript линий и картинок на canvas

Следующая статья — http://www.html5canvas.ru/2011/03/mouse.html. Здесь приведён код javascript для обработки событий мыши на canvas — внутри, снаружи, нажатие кнопок, изменение координат курсора мыши. Приведён скелет html страницы для работы с canvas.

На http://www.robodesign.ro/paintweb/trunk/demos/demo1.html пример готового приложения — графический редактор PaintWeb, написанный на javascript. Из инструментов используются карандаш, стёрка, кружки, прямоугольники, вставка текста и картинок (по URL)

http://www.mrdoob.com/projects/harmony/#grid — ещё один движок для рисования на html5 — Harmony.

И напоследок http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/#transformations — документация по API html5 canvas — масштабирование, перемещение и поворот содержимого canvas на произвольный угол; рисование и стиль линий, окружностей, прямоугольников, кривых Безье; текст; заливки, линейные и радиальные градиенты; вставка изображений; манипуляции на уровне пикселей; прозрачность изображений, смазывание, тень. Всё нафаршировано примерами кода.

В итоге информации достаточно, чтоб сделать графический редактор на html5 под собственные нужды.