Браузерная совместимость элемента Canvas

183

На данный момент мы многое узнали о элементе Canvas и многому научились. Настало время сделать шаг назад и ответить на вопрос, который дамокловым мечом висит над каждой новой возможностью HTML5: насколько безопасно использование этой возможности в плане кроссбраузерности?

К счастью, холст является одной из наиболее поддерживаемых возможностей HTML5. Она поддерживается всеми последними версиями основных браузеров. Конечно же, чем выше версия браузера, тем выше уровень поддержки, т.к. в более новых версиях браузеров увеличивается скорость прорисовки и исправляются ошибки:

Поддержка Canvas основными браузерами
Браузер 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.

Пройди тесты
Лучший чат для C# программистов