Книга: JavaScript. Подробное руководство, 6-е издание

Canvas

Canvas

HTML-элемент для создания графических изображений (Node, Element)

Объект Canvas представляет HTML-элемент <canvas>. Он не обладает собственным поведением, но определяет API для поддержки операций рисования. С помощью этого объекта можно задать ширину и высоту холста с помощью его свойств width и height, а вызовом метода toDatallrl() из него можно извлечь изображение, но основная функциональность обеспечивается объектом «контекста», возвращаемого методом getContext(). Смотрите справочную статью CanvasRenderingContext2D.

Свойства

unsigned long height
unsigned long width

Эти свойства соответствуют атрибутам width и height тега <canvas> и определяют размеры координатной плоскости холста. По умолчанию свойство width имеет значение 300, a height - 150.

Если размер элемента <canvas> не указан в таблице стилей или во встроенном атрибуте style, эти свойства width и height также определяют экранные размеры холста. Изменение значений этих свойств (даже запись их текущих значений) вызывает очистку холста (заливку черным прозрачным цветом) и сброс всех его графических атрибутов в значения по умолчанию.

Методы

object getContext(string contextld, [любые аргументы...])

Возвращает объект, посредством которого выполняется рисование в элементе Canvas. Если передать ему строку «2d», он вернет объект CanvasRenderingContext2D, реализующий рисование на двухмерной плоскости. В этом случае не требуется передавать никаких дополнительных аргументов.

Для каждого элемента <canvas> существует только один объект CanvasRenderingContext2D, т.е. повторные вызовы getContext("2d") будут возвращать тот же самый объект.

Спецификация HTML5 стандартизует аргумент «2d» для этого метода и не определяет других допустимых аргументов. В настоящее время разрабатывается отдельный стандарт, WebGL, для трехмерной графики. В броузерах, поддерживающих его, этому методу можно передать строку «webgl», чтобы получить объект, обеспечивающий создание трехмерных изображений.

Следует, однако, отметить, что в данной книге описывается только объект CanvasRenderingContext2D.

string toDataURL([string type], [любые аргументы...])

Метод toDataURL() возвращает растровое изображение холста в виде URL-адреса data://, который можно использовать в теге <img> или передавать по сети. Например:

// Скопировать содержимое холста в элемент <img> и добавить его в документ
var canvas = document.getElementById("my_canvas");
var image = document.createElement("img");
image.src = canvas.toDataURL();
document.body.appendChild(image):

Аргумент type определяет, какой МІМЕ-тип или графический формат изображения следует использовать. Если этот аргумент отсутствует, используется значение по умолчанию «image/png». Формат PNG является единственным, который обязаны поддерживать все реализации. Чтобы получить изображение в другом формате, отличном от PNG, можно передать дополнительные аргументы, определяющие порядок кодирования. Например, если в аргументе type передается строка «image/jpeg»» во втором аргументе следует передать число в диапазоне от 0 до 1, определяющее уровень качества изображения. На момент написания этих строк никаких других аргументов стандартизовано не было.

Для предотвращения утечки информации между документами с разным происхождением метод toDataURL() не будет работать с тегами <canvas>, которые имеют «неясное происхождение». Считается, что элемент <canvas> имеет неясное происхождение, если в нем содержалось изображение (созданное непосредственно с помощью метода drawImage() или косвенно, с помощью объекта CanvasPattern), имеющее иное происхождение, отличное от происхождения содержащего его документа. Кроме того, считается, что элемент <canvas> имеет неясное происхождение, если в нем рисовался текст с использованием веб-шрифтов, имеющих иное происхождение.

Оглавление книги