Как стать автором
Обновить

Динамическое создание exCanvas

Время на прочтение 2 мин
Количество просмотров 1.9K
Автор(SiDChik@mail.ru) не имеет аккаунт поэтому уговорил меня запостить сию статью

С недавних пор я устроился на работу WEB-Разработчиком, делаю on-line карту. Помимо банального передвижения, на карте приходиться рисовать различные объекты, для этого у меня используется Canvas. Если поискать на Хабре, то можно найти пару топиков про данную технологию. Если быть кратким, то это инструмент для отрисовки графики средствами JavaScript.
По умолчанию данный инструмент не поддерживается в IE, для этого можно поискать и найти скрипт ExCanvas. Для его установки, достаточно подключить один единственный JavaScript файл.

В ходе работы появилась ситуация, которая требует динамического создания canvas’а. К сожалению, что-то типа document.createElement(‘canvas’); отказывалось работать в IE. И при вызове функции getContent, происходила ошибка. При этом, на выходе у меня должен получится «народный» продукт, следовательно, обязательно необходима кросс-браузерность.


Погуглив нашел другой вариант скрипта, дописанный одним добрым программистом, который обещал, что ошибка исправлена(NewExcanvas). Вариант описанный в теме оказался не до конца рабочим. Парадоксально, но факт — отказывалось работать в Google Chrome! В конце концов, была написана простая функция:

////Динамическое создание канваса (Ширина, Высота)
function createCanvas(w,h)
{
  var canvas = excanvas(document.createElement("canvas"));
  if (canvas===undefined)
  {
    var canvas = document.createElement("canvas");
  }
  canvas.width=w;
  canvas.height=h;
 
  canvas.style.width=w+'px';
  canvas.style.height=h+'px';
 
  return canvas
}

* This source code was highlighted with Source Code Highlighter.


Из кода видно, что для создания canvas’a обязательно нужно указать ширину, высоту объекта. При этом эти размеры, нужно указывать и через стиль и поменяв значение соответствующих атрибутов.
Хочется отметить, что данная технология работает и под nix браузерами, и не требует установки дополнительных плагинов. Поэтому если переписать казуалки под данный инструмент, можно рассчитывать на массовость проекта, опять же изза кросс-браузерности, и малых требований.
Теги:
Хабы:
+8
Комментарии 6
Комментарии Комментарии 6

Публикации

Истории

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн
PG Bootcamp 2024
Дата 16 апреля
Время 09:30 – 21:00
Место
Минск Онлайн
EvaConf 2024
Дата 16 апреля
Время 11:00 – 16:00
Место
Москва Онлайн