Браузерная совместимость элемента Canvas
183Веб-программирование --- HTML5 --- Браузерная совместимость элемента Canvas
На данный момент мы многое узнали о элементе Canvas и многому научились. Настало время сделать шаг назад и ответить на вопрос, который дамокловым мечом висит над каждой новой возможностью HTML5: насколько безопасно использование этой возможности в плане кроссбраузерности?
К счастью, холст является одной из наиболее поддерживаемых возможностей HTML5. Она поддерживается всеми последними версиями основных браузеров. Конечно же, чем выше версия браузера, тем выше уровень поддержки, т.к. в более новых версиях браузеров увеличивается скорость прорисовки и исправляются ошибки:
Браузер | IE | Firefox | Chrome | Safari | Opera | Safari iOS | Android |
Минимальная версия | 9 | 3.5 | 3 | 4 | 10 | 1 | 1 |
Вряд ли вам придется столкнуться с более старой версией любого из этих браузеров, за исключением Internet Explorer. Но это одно исключение ставит использующих холст разработчиков перед вопросом: как можно использовать холст в вебстраницах так, чтобы не лишать возможности просматривать подобные страницы пользователей старых, но все еще популярных версий этого браузера, таких как IE 8 и IE 7?
Как и в случае со многими другими возможностями HTML5, к решению этой проблемы совместимости есть два подхода. Первый — определять отсутствие поддержки холста браузером и пытаться использовать другое решение. А второй подход — закрыть этот пробел другим инструментом, способным эмулировать холст HTML5, чтобы страницы работали без изменений на старых браузерах. В случае холста второй подход неожиданно оказывается лучшим.
Чтобы позволить старым версиям Internet Explorer работать с холстом, существует несколько надежных резервных решений. Одним из таких решений является библиотека ExplorerCanvas (также называется excanvas), разработанная инженером из Google - Эриком Арвидссоном. Эта библиотека эмулирует холст в Internet Explorer 7 и 8, используя только JavaScript и устаревшую в настоящее время технологию VML (Vector Markup Language, язык векторной разметки).
Скопируйте файл excanvas.js в папку веб-страницы и добавьте следующую ссылку на этот файл:
<head>
<title>...</title>
<!--[if lt IE 9]
<script src="excanvas.js"></script>
<![endif]-->
...
</head>
Обратите внимание, что эта ссылка является условной. Версии Internet Explorer более ранние, чем IE 9, будут использовать ее, но IE 9 и другие браузеры не будут вообще обращать на нее внимания.
Теперь элемент <canvas> можно использовать без особых проблем. Например, эта библиотека — все что требуется, чтобы наша программа рисования (из предыдущей статьи) работала в старых версиях Internet Explorer.
К сожалению, библиотека ExplorerCanvas — не совсем идеальное решение. Если и попытаетесь использовать более сложные приемы рисования, существует вероятность, что некоторые детали не будут выглядеть так, как вы ожидаете. Основные возможности, не поддерживаемые в ExplorerCanvas, включают радиальные градиенты, тени, обрезку изображений, обработку "сырых" пикселов, а также URL данных.
Для по-настоящему амбициозных задумок, например сложных анимаций или игр с горизонтальной прокруткой экрана (side-scrolling), ExplorerCanvas может оказаться недостаточно быстрой. В такой ситуации следует рассмотреть возможность применения другого заполнителя, использующего высокопроизводительный модуль расширения, такой как Silverlight или Flash. Используйте бесплатную библиотеку FlashCanvas. Подобно библиотеке ExplorerCanvas, эту библиотеку можно подключить к веб-странице с помощью одной строки кода JavaScript. Но в отличие от ExplorerCanvas она использует модуль Flash, без малейшего следа VML.
Библиотека FlashCanvas также имеет и профессиональную коммерческую версию — FlashCanvas Pro. Эта версия предоставляет еще лучший уровень поддержки холста, который, согласно результатам тестирования браузерной совместимости, примерно такой же, как и уровень поддержки холста большинством основных браузеров. Сравнить уровень браузерной поддержки, предоставляемой этими тремя разными библиотеками — ExplorerCanvas, FlashCanvas и FlashCanvas Pro — можно на сайте flashcanvas.net.
Совместив на странице возможности холста и библиотеки наподобие FlahsCanvas, вы получите действительно замечательную поддержку практически всех браузеров, известных человечеству в настоящее время. Таким образом, вы обеспечите поддержку не только для немного устарелых версий Internet Explorer, посредством использования Flash, но также и для мобильных устройств, не использующих Flash, таких как iPad и iPhone, с помощью HTML5.