Pull to refresh

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

Reading time 2 min
Views 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 браузерами, и не требует установки дополнительных плагинов. Поэтому если переписать казуалки под данный инструмент, можно рассчитывать на массовость проекта, опять же изза кросс-браузерности, и малых требований.
Tags:
Hubs:
+8
Comments 6
Comments Comments 6

Articles