Предыдущий ролик Следующий ролик  

Видео урок: Использование HTML5 элемента Canvas в реальных проектах

HTML5: графика и анимация с Canvas

Поскольку элемент canvas новый в HTML5, есть браузеры, которые его не поддерживают. Давайте посмотрим, что случится, если браузер, который не поддерживает тег canvas, если встречает его в документе. Вот здесь у нас canvas, а внутри есть некоторый текст. В браузерах, которые понимают тег canvas, этот текст не будет показан, а вместо этого будет заменен на сам canvas в изображаемой поверхности. Браузер, который не понимает тег canvas, проигнорирует его и отобразит вместо этого контекст, находящийся внутри тега.

Давайте я вам просто покажу вам это. Сейчас я просто смоделирую браузер, который не понимает canvas, поскольку все браузеры, которые есть у меня на этой машине, о нем знают. Я быстро комментирую это и вот это. Вот так браузер обработает тег canvas, если он его не распознает. Давайте быстренько это рассмотрим. Вы видите, что если браузер не знает тег canvas, тогда будет показан текст, находящийся внутри.

Это случится в том случае, если у вас старый браузер, и он встретит тег canvas, или, если быть более точным, любой тег, который он не знает. Но если браузер понимает тег canvas - давайте уберем комментарии, сохраним - вы видите, что у меня есть стиль, определенный для этого элемента canvas, с пунктирной 3х-пиксельной рамкой и задним фоном. Итак, нам должен быть показан серый квадрат с рамкой.

Давайте вернемся в браузер и обновим страничку. Обновляем, и вы видите, что в браузере, который понимает тег canvas, этот элемент показан со всеми стилями.