А что с 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 сможет проявить себя во всей красе.
Куда дальше
- следующая — Полноценный пример
- предыдущая — Изображения
- содержание