Элемент Canvas

Элемент canvas позволяет реализовать отрисовку графики на растровом полотне, зависимом от разрешения.Для рисования на холсте используются "контексты", например двухмерный контекст Canvas, определенный в спецификации HTML Canvas 2D Context. В Windows Internet Explorer 9 была введена поддержка элемента Canvas при помощи API рисования двухмерного Canvas в качестве контекста. (В Internet Explorer 9 двухмерный контекст Canvas представлен объектом CanvasRenderingContext2D или интерфейсом ICanvasRenderingContext2D.) Как и вся графика в Internet Explorer 9, элемент Canvas реализуется при помощи аппаратного ускорения. Это достигается благодаря использованию Windows и графического процессора.

Canvas позволяет рисовать сценарии, которые содержат прямоугольники, контуры, линии, заливки, дуги, кривые Безье и кривые второго порядка. Кроме того, элемент Canvas в Internet Explorer 9 поддерживает атрибуты width и height. (Значения ширины и высоты по умолчанию — 300 и 150 пикселей соответственно, а цвет по умолчанию — прозрачный черный.)

Canvas — это способ программирования графики в Интернете. Тег canvas представляет собой "непосредственный режим" (команды рисования сразу отправляются на графическое оборудование); это двухмерная поверхность для рисования, которую можно использовать для создания диаграмм в реальном времени, анимаций и интерактивных игр без необходимости скачивать отдельный подключаемый модуль. Так как API определяются объектом CanvasRenderingContext2D, элемент Canvas позволяет реализовывать сценарии рисования, которые содержат:

Вы можете использовать JavaScript, чтобы анимировать рисунки на полотне или создавать интерактивные элементы, реагирующие на ввод с клавиатуры, щелчок мышью или событие браузера. Например, в этом примере на веб-сайте тестового выпуска Internet Explorer с помощью нескольких строк кода JavaScript создаются беспорядочно расположенные разноцветные яркие линии.

Internet Explorer 9 и более поздние версии поддерживают следующие API двухмерного контекста Canvas (члены, предоставленные объектом CanvasRenderingContext2D):

В Internet Explorer 11 также появилась поддержка следующих API двухмерного контекста Canvas (уровень 2).

  • Свойство msImageSmoothingEnabled для выбора между традиционным масштабированием с билинейной фильтрацией и масштабированием по методу ближайшего соседа при увеличении небольших изображений.
  • Поддержка значения правила заливки even-odd в методах fill, clip и isPointInPath элемента Canvas. В дополнение к атрибутам правила заливки стандарта консорциума W3C браузер IE11 предлагает msFillRule — глобальное свойство правила заливки. Это свойство задает правило заливки сразу для всех методов.
  • Методы setLineDash, getLineDash и lineDashOffset для создания настраиваемых шаблонов штриха.

Справочник по API

Canvas

Примеры и учебники

Создание трехмерной графики с использованием элемента Canvas
Сопоставление точек между двухмерными системами координат
Создание специальных эффектов с помощью элемента Canvas
Выборка цветов изображения с помощью Canvas
Создание космической игры с помощью Canvas
Выбор между SVG и Canvas
Примеры использования SVG и Canvas

Демонстрации тестового выпуска Internet Explorer

Canvas Pad
Canvas Pinball
Canvas Zoom
Galactic: тест производительности HTML5
HTML5 Blizzard
Mr. Potato Gun
Particle Acceleration

Записи блога IEBlog

Galactic: создание трехмерной солнечной системы с помощью HTML5
Встроенная технология HTML5: первый выпуск Internet Explorer 10 Platform Preview доступен для разработчиков
HTML5 Blizzard: полное аппаратное ускорение в действии
Отладка распространенных проблем элемента Canvas
В Internet Explorer 9 реализован Canvas с аппаратным ускорением
Размышления на тему выбора между Canvas и SVG

Спецификация

Двухмерный контекст элемента Canvas HTML

Связанные разделы

Знакомство с элементом Canvas HTML5
"Трон": закулисье. Как создать веб-комикс с использованием HTML5
Руководство по элементу Canvas HTML5 для разработчиков
Создание визуальной библиотеки изображений с использованием элемента Canvas HTML5
Создание игры BrikBloc с помощью SVG и элемента Canvas HTML5
Создание игры Asteroids с использованием игрового движка Impact для HTML5
Модернизация игр на основе элемента Canvas HTML5. Часть 1: аппаратное масштабирование и CSS3
Модернизация игр на основе элемента Canvas HTML5. Часть 2: автономный режим, перетаскивание и файловые API
Игры в HTML5: спрайтовая анимация в элементе Canvas с использованием библиотеки EaselJS
Используйте все возможности элемента Canvas HTML5 с аппаратным ускорением

 

 

Показ:
© 2014 Microsoft