Xiper

Explorer Canvas

Автор: Егор Скорняков и Александр Головко Дата публикации:

HTML5 дает нам замечательный инструмент для рисования — canvas API. К сожалению, Microsoft по старой традиции опять ставит палки в колеса стандартам, а заодно, и нам с вами. IE (включая 8-ю версию) не поддерживает эту прогрессивную технологию.

К счастью, не все так плохо, потому, что есть альтернативное решение — распространяемая бесплатно библиотека с открытым исходным кодом Explorer Canvas.

Функции библиотеки используют тот факт, что IE поддерживает VML — язык от Microsoft, юзая который можно воплотить многое из того что умеет <canvas>.

По традиции сразу же пример использования.

Проверено в:

  • IE 6-8
  • Firefox 3
  • Opera 9.5-10
  • Safari 3
  • Chrome 7

Что качать?

  • Библиотеку Explorer Canvas.

Быстрый старт

Подключаем библиотеку через условные комментарии:

<!--[if IE]>
<script src="excanvas.js"></script>
<![endif]-->

Специальная инициализация не требуется — библиотека работает в автоматическом режиме. Можно приступать к работе с элементом canvas, теперь команды рисования поймет и IE.

Ограничения и недостатки

К сожалению, у данной библиотеки есть ряд ограничений и недостатков:

  • градиенты доступны только линейные (радиальные не поддерживаются);
  • шаблоны (patterns) должны повторяться в обоих направлениях;
  • не поддерживает область обрезания рисунка;
  • при непропорциональном масштабировании контуры могут отображаться неправильно;
  • работает медленно. Это, конечно, не сильно удивит пользователей MSIE: в Internet Explorer Javascrtipt парсер куда медленнее, чем в других браузерах. Если начать рисовать сложные фигуры, которые Javascript библиотека будет преобразовывать в VML, то браузер будет работать на грани зависания. Тормозов на простых и несложных фигурах не будет, но если попробовать запустить анимацию на холсте — IE этого не переживет.

Есть и еще один нюанс. Explorer Canvas инициализирует интерфейс холста автоматически при подключении скрипта excanvas.js к странице. Но это не значит, что холст сразу же готов к использованию. Иногда получается, что холст еще не готов и когда ты попытаешься что-то с ним сделать, например, получить контекст, IE будет ругаться примерно так «данный метод или свойство не поддерживаются».

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

Материалы