Главная/ Учимся Javascript, CSS, HTML/ Уроки HTML/ Up And Running/ Lets Call It A Draw/ А что с IE? HTML5. Up and Running. Марк Пилгрим

А что с IE?

Дата публикации: 16.03.2011

Microsoft Internet Explorer (включая 8-ю версию — последнюю версию на момент написания книги) не поддерживает canvas API. Тем не менее, IE поддерживает VML — формат от Microsoft, который многое умеет из того что умеет <canvas>. Вот таким образом и родился excanvas.js.

ExplorerCanvas—excanvas.js — библиотека с открытым исходным кодом, которая распространяется бесплатно. Служит для реализации поддержки canvas API в Internet Explorer. Чтобы начать ее использовать, нужно ее подключить в начале страницы:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dive Into HTML 5</title>
<!--[if IE]>
<script src="excanvas.js"></script>
<![endif]-->
</head>
<body>
...
</body>
</html>

Условные комментарии дают возможность подключить библиотеку только для IE. Остальные браузеры не будут ее даже загружать.

После подключения excanvas.js не нужно больше ничего делать для IE. Можно просто добавить в разметку элемент <canvas> и работать с ним как обычно: рисовать линии, текст, фигуры — библиотека сама растолкует IE как это все отобразить.

Правда есть несколько ограничений:

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

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

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

Куда дальше

Показать комментарии