Xiper

Canvas

Автор: Евгений Рыжков и Татьяна Головко Дата публикации:
Последнее обновление:

HTML5 определяет элемент canvas как

зависимое от разрешения растровое полотно, которое может быть использовано для рендеринга графики, игровой графики и других графических изображений «на лету».

Холст представляет собой прямоугольную область, на которой с помощью Javascript можно нарисовать все, что душе угодно. В HTML5 есть набор функций (canvas API), которые дают возможность рисовать фигуры, определять пути (path), создавать градиенты и применять трансформации.

Проверка поддержки canvas API осуществляется с помощью метода 2, упомянутого ранее. Если браузер поддерживает canvas API, создается представление элемента canvas, у которого будет метод getContext(). Если же браузер не поддерживает canvas API, элемент canvas будет иметь только общие свойства, а каких-либо специфических для canvas у него не будет.

Поддержку canvas можно проверить следующей функцией:

function supports_canvas() {
return !!document.createElement('canvas').getContext;
}

Эта функция запускается путем создания фиктивного элемента <canvas>.
return !!document.createElement('canvas').getContext;

Этот элемент не появится на твоей странице и его никто не увидит. Он просто будет находиться в памяти и ничего не делать, как лодка в стоячей воде.

Как только ты добавишь элемент <canvas> появится возможность проверить наличие метода getContext(). Этот метод будет существовать только если браузер поддерживает canvas API. return !!document.createElement('canvas').getContext;

И наконец, можно использовать двойное отрицание чтобы привести результат к логическому значению типа Boolean return !!document.createElement('canvas').getContext;

Данная функция может определить поддержку большинства функций холста, включая фигуры, пути, градиенты и узоры. Но эта функция не обнаружит наличие сторонних библиотек для эмуляции canvas, как, например, explorercanvas для IE.

Вместо того чтобы писать эту функцию самостоятельно, можно использовать Modernizr:

if (Modernizr.canvas) {
// Давайте нарисуем парочку фигур!
} else {
// нет встроенной поддержки canvas  :(
}

Для проверки поддержки текста в canvas существует отдельный способ, который рассмотрим далее.

Куда дальше

По теме