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 существует отдельный способ, который рассмотрим далее.
Куда дальше
- следующая — Canvas text
- предыдущая — Modernizr: библиотека для определения поддержки HTML5
- содержание