ApplicationCache

прикладной интерфейс управления кэшем приложений (EventTarget)

Объект ApplicationCache - это значение свойства applicationCache объекта Window . Он определяет API управления обновлением кэшированных приложений. В простых кэшируемых приложениях не требуется использовать этот API: достаточно создать (и обновлять по мере необходимости) соответствующий файл объявления кэшируемого приложения, как описывается в разделе 20.4. В более сложных приложениях, где может возникнуть потребность более активно управлять обновлениями, можно использовать свойства, методы и обработчики событий, описываемые здесь. Подробности приводятся в разделе 20.4.2.

Константы

Следующие константы представляют допустимые значения свойства status ,

unsigned short UNCACHED = 0

Это приложение не имеет атрибута manifest : оно не кэшируется.

unsigned short IDLE = 1

Файл объявления проверен, данное приложение сохранено в кэше и обновлено.

unsigned short CHECKING = 2

В настоящее время броузер проверяет файл объявления.

unsigned short DOWNLOADING = З

Броузер загружает и сохраняет в кэше файлы, перечисленные в объявлении.

unsigned short UPDATEREADY = 4

Была загружена и сохранена в кэше новая версия приложения.

unsigned short OBSOLETE = 5

Файл объявления не найден и приложение будет удалено из кэша.

Свойства

readonly unsigned short status

Это свойство описывает состояние кэша текущего документа. Оно может принимать одно из значений, перечисленных выше.

Методы

void swapCache()

Когда свойство status получает значение UPDATEREADY , броузер управляет двумя версиями кэшируемого приложения: старые версии файлов из кэша, используемые запущенным приложением, и новые загруженные версии, которые будут использоваться при следующем запуске приложения. Приложение может вызвать swapCache() , чтобы сообщить броузеру, что он может немедленно удалить старые версии и начать использовать новые версии файлов. Однако имейте в виду, что это может привести к конфликту версий, и гораздо безопаснее будет выполнить переход на новую версию, перезагрузив приложение вызовом метода Location.reload() .

void update()

Обычно броузер проверяет наличие новой версии файла объявления кэшируемого приложения каждый раз, когда это приложение загружается. Долгоживущие веб-приложения могут использовать этот метод, чтобы чаще проверять наличие обновлений.

Обработчики событий

В ходе проверки файла объявления и обновления кэша броузер возбуждает в объекте ApplicationCache целую серию событий. Для регистрации обработчиков событий можно использовать следующие свойства объекта ApplicationCache или методы интерфейса EventTarget , реализованные в объекте ApplicationCache . Обработчики большинства этих событий получают простой объект Event . Обработчики событий «progress» получают объект ProgressEvent , с помощью которого можно узнать, какой объем в байтах уже был загружен.

oncached Возбуждается, когда приложение впервые сохраняется в кэше. Это последнее событие в последовательности.

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

ondownloading Возбуждается, когда броузер начинает загрузку ресурсов, перечисленных в файле объявления, т. е. либо когда приложение впервые помещается в кэш, либо когда оно обновляется. За этим событием обычно следует одно или более событий «progress».

onerror Возбуждается, когда в ходе обновления кэша возникает ошибка. Это может произойти, например, когда броузер работает в автономном режиме или если приложение ссылается на несуществующий файл объявления.

onnoupdate Возбуждается, когда броузер определяет, что файл объявления не изменился и приложение в кэше имеет текущую версию. Это последнее событие в последовательности.

onobsolete Возбуждается, когда исчезает файл объявления кэшируемого приложения. Это приводит к удалению приложения из кэша. Это последнее событие в последовательности.

onprogress Возбуждается периодически, пока идет загрузка и сохранение в кэше файлов приложения. С этим событием обработчикам передается объект ProgressEvent .

onupdateready Возбуждается, когда броузер загрузит и сохранит в кэше новую версию приложения (и она будет готова к использованию при следующем запуске приложения). Это последнее событие в последовательности.

 

ArrayBuffer

последовательность байтов фиксированной длины

Объект ArrayBuffer представляет последовательность байтов фиксированной длины в памяти, но не определяет методов извлечения и сохранения байтов. Доступ к байтам и их интерпретацию обеспечивает объект ArrayBufferView , подобный классам типизированных массивов.

Конструктор

new ArrayBuffer(unsigned long length )

Создает новый объект ArrayBuffer с указанным количеством байтов. Все байты в новом объекте ArrayBuffer инициализируются значением 0.

Свойства

readonly unsigned long byteLength

Длина в байтах последовательности в объекте ArrayBuffer .

 

ArrayBufferView

общие свойства типов, основанных на ArrayBuffer

Тип ArrayBufferView служит суперклассом для классов, предоставляющих доступ к байтам в объекте ArrayBuffer . Объект ArrayBufferView нельзя создать непосредственно: он предназначен, чтобы определять общие свойства для подтипов, таких как типизированные массивы и DataView .

Свойства

readonly ArrayBuffer buffer

Объект ArrayBuffer , представлением которого является данный объект.

readonly unsigned long byteLength

Длина в байтах фрагмента буфера, доступного посредством данного представления.

readonly unsigned long byteOffset

Начальная позиция в байтах фрагмента буфера, доступного посредством данного представления.

 

Attr

атрибут элемента документа

Объект Attr представляет атрибут узла Element . Получить объект Attr можно посредством свойства attributes интерфейса Node или вызовом метода getAttributeNode() или getAttributeNodeNS() интерфейса Element.

Поскольку значения атрибутов могут быть представлены в виде строк, обычно нет необходимости использовать интерфейс Attr . В большинстве случаев самый простой способ работы с атрибутами предоставляют методы Element.getAttribute() и Element.setAttribute(). Эти методы используют строки в качестве значений атрибутов и позволяют вообще отказаться от применения объектов Attr .

Свойства

readonly string localName

Имя атрибута, без возможного префикса пространства имен.

readonly string name

Имя атрибута, включая префикс пространства имен, если таковое имеется,

readonly string namespaceURI

Идентификатор URI, определяющий пространство имен атрибута, или null, если отсутствует.

readonly string prefix

Префикс пространства имен атрибута или null, если отсутствует,

string value

Значение атрибута.

 

Audio

HTML-элемент

Объект Audio , представляющий HTML-элемент

Конструктор

new Audio([string src])

Этот конструктор создает новый элемент

 

BeforeUnloadEvent

объект Event для событий выгрузки (Event)

Событие «unload» возбуждается в объекте Window непосредственно перед тем, как броузер перейдет к другому документу; оно дает веб-приложению возможность предложить пользователю подтвердить свое желание покинуть страницу. Обработчикам события «unload» передается объект BeforeUnloadEvent . Если вам потребуется запросить у пользователя подтвердить желание покинуть страницу, вам не нужно вызывать метод Window.confirm(). Вместо этого верните из обработчика события строку или присвойте строку свойству returnValue этого объекта. Эта строка будет выведена перед пользователем в форме диалога подтверждения.

Смотрите также справочные статьи Event и Window.

Свойства

string returnValue

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

 

Blob

блок двоичных данных, таких как содержимое файла

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

Объекты Blob позволяют узнать только свой размер и иногда MIME-тип хранящихся в них данных и определяют единственный метод, позволяющий интерпретировать фрагмент своих данных как отдельный объект Blob .

Объекты Blob используются многими прикладными интерфейсами: объект FileReader позволяет читать содержимое объекта Blob , а объект BlobBuilder - создавать новые объекты Blob . Объект XMLHttpRequest обеспечивает возможность загружать и выгружать объекты Blob . Обсуждение объектов Blob и прикладных интерфейсов, использующих их, вы найдете в разделе 22.6.

Свойства

readonly unsigned long size

Объем двоичных данных в объекте Blob в байтах,

readonly string type

МІМЕ-тип данных в объекте Blob , если указан, в противном случае - пустая строка.

Методы

Blob slice(unsigned long start, unsigned long length, [string contentType])

Возвращает новый объект Blob , представляющий length байтов в данном объекте Blob , начиная со смещения start . Если указан аргумент contentType , он будет использован, как значение свойства type возвращаемого объекта Blob

 

BlobBuilder

создает новые объекты Blob

Объект BlobBuilder используется для создания новых объектов Blob из текстовых строк и из двоичных данных в объектах ArrayBuffer и в других объектах Blob . Чтобы создать объект Blob , следует сначала создать объект BlobBuilder , вызвать его метод append() один или более раз и затем вызвать метод getBlob().

Конструктор

new BlobBuilder()

Новый объект BlobBuilder создается вызовом конструктора BlobBuilder() без аргументов.

Методы

void append(string text, [string endings])

Добавляет в конструируемый двоичный объект Blob текст text в кодировке UTF-8.

void append(Blob data)

Добавляет в конструируемый двоичный объект Blob данные из двоичного объекта data .

void append(ArrayBuffer data)

Добавляет в конструируемый двоичный объект Blob данные из объекта data типа ArrayBuffer .

Blob getBlob([string contentType])

Возвращает объект Blob , представляющий все данные, которые были добавлены в этот объект BlobBuilder с момента его создания. Каждый вызов этого метода возвращает новый объект Blob . Если указан аргумент contentType , он будет использоваться в качестве значения свойства type возвращаемого объекта Blob . Если этот аргумент не указан, свойство type возвращаемого объекта Blob будет содержать пустую строку.

 

Button

HTML-элемент (Node, Element, FormControl)

Объект Button представляет HTML-элемент

. Большинство свойств и методов объекта Button описываются в справочных статьях FormControl и Element . Однако, когда свойство type объекта Button (смотрите справочную статью FormControl ) имеет значение «submit», другие свойства, перечисленные здесь, определяют параметры отправки формы, имеющие приоритет перед аналогичными свойствами формы, в которой находится кнопка Button (смотрите справочную статью FormControl ).

Свойства

Следующие свойства используются, только когда элемент

имеет атрибут type со значением «submit»,

string formAction

Это свойство соответствует HTML-атрибуту formaction . Для кнопок, управляющих отправкой форм, это свойство переопределяет свойство action форм,

string formEnctype

Это свойство соответствует HTML-атрибуту formenctype . Для кнопок, управляющих отправкой форм, это свойство переопределяет свойство enctype форм и может принимать те же значения,

string formMethod

Это свойство соответствует HTML-атрибуту formmethod . Для кнопок, управляющих отправкой форм, это свойство переопределяет свойство method форм,

string formNoValidate

Это свойство соответствует HTML-атрибуту formnovalidate . Для кнопок, управляющих отправкой форм, это свойство переопределяет свойство noValidate форм,

string formTarget

Это свойство соответствует HTML-атрибуту formtarget . Для кнопок, управляющих отправкой форм, это свойство переопределяет свойство target форм.

 

Canvas

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

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

Свойства

unsigned long height

unsigned long width

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

Объекты Blob позволяют узнать только свой размер и иногда MIME-тип хранящихся в них данных и определяют единственный метод, позволяющий интерпретировать фрагмент своих данных как отдельный объект Blob .

Объекты Blob используются многими прикладными интерфейсами: объект FileReader позволяет читать содержимое объекта Blob , а объект BlobBuilder - создавать новые объекты Blob . Объект XMLHttpRequest обеспечивает возможность загружать и выгружать объекты Blob . Обсуждение объектов Blob и прикладных интерфейсов, использующих их, вы найдете в разделе 22.6.

Свойства

readonly unsigned long size

Объем двоичных данных в объекте Blob в байтах,

readonly string type

МІМЕ-тип данных в объекте Blob, если указан, в противном случае - пустая строка.

Методы

Blob slice(unsigned long start, unsigned long length, [string contentType])

Возвращает новый объект Blob , представляющий length байтов в данном объекте Blob , начиная со смещения start . Если указан аргумент contentType , он будет использован, как значение свойства type возвращаемого объекта Blob

 

BlobBuilder

создает новые объекты Blob

Объект BlobBuilder используется для создания новых объектов Blob из текстовых строк и из двоичных данных в объектах ArrayBuffer и в других объектах Blob . Чтобы создать объект Blob , следует сначала создать объект BlobBuilder , вызвать его метод append() один или более раз и затем вызвать метод getBlob().

Конструктор

new BlobBuilder()

Новый объект BlobBuilder создается вызовом конструктора BlobBuilder() без аргументов.

Методы

void append(string text, [string endings])

Добавляет в конструируемый двоичный объект Blob текст text в кодировке UTF-8.

void append(Blob data)

Добавляет в конструируемый двоичный объект Blob данные из двоичного объекта data .

void append(ArrayBuffer data)

Добавляет в конструируемый двоичный объект Blob данные из объекта data типа ArrayBuffer .

Blob getBlob([string contentType])

Возвращает объект Blob , представляющий все данные, которые были добавлены в этот объект BlobBuilder с момента его создания. Каждый вызов этого метода возвращает новый объект Blob . Если указан аргумент contentType , он будет использоваться в качестве значения свойства type возвращаемого объекта Blob . Если этот аргумент не указан, свойство type возвращаемого объекта Blob будет содержать пустую строку.

 

Button

HTML-элемент (Node, Element, FormControl)

Объект Button представляет HTML-элемент

. Большинство свойств и методов объекта Button описываются в справочных статьях FormControl и Element . Однако, когда свойство type объекта Button (смотрите справочную статью FormControl ) имеет значение «submit», другие свойства, перечисленные здесь, определяют параметры отправки формы, имеющие приоритет перед аналогичными свойствами формы, в которой находится кнопка Button (смотрите справочную статью FormControl ).

Свойства

Следующие свойства используются, только когда элемент

имеет атрибут type со значением «submit»,

string formAction

Это свойство соответствует HTML-атрибуту formaction . Для кнопок, управляющих отправкой форм, это свойство переопределяет свойство action форм,

string formEnctype

Это свойство соответствует HTML-атрибуту formenctype . Для кнопок, управляющих отправкой форм, это свойство переопределяет свойство enctype форм и может принимать те же значения,

string formMethod

Это свойство соответствует HTML-атрибуту formmethod . Для кнопок, управляющих отправкой форм, это свойство переопределяет свойство method форм,

string formNoValidate

Это свойство соответствует HTML-атрибуту formnovalidate . Для кнопок, управляющих отправкой форм, это свойство переопределяет свойство noValidate форм,

string formTarget

Это свойство соответствует HTML-атрибуту formtarget . Для кнопок, управляющих отправкой форм, это свойство переопределяет свойство target форм.

 

Canvas

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

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

Свойства

unsigned long height

unsigned long width

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

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

Методы

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

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

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

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

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

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

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

// Скопировать содержимое холста в элемент и добавить его в документ

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

 

CanvasGradient

цветной градиент для использования в элементе Canvas

Объект CanvasGradient представляет цветовой градиент, который может быть присвоен свойствам strokeStyle и fillStyle объекта CanvasRenderingContext2D . Объект CanvasGradient возвращается методами createLinearGradient() и createRadialGradient() объекта CanvasRenderingContext2D .

После создания объекта CanvasGradient следует вызвать метод addColorStop() и с его помощью определить, какой цвет в какой позиции должен отображаться внутри градиента. Между заданными позициями цвет будет интерполироваться так, чтобы создать эффект плавного перехода или исчезновения цвета. Если не определить цвет ни в одной позиции, градиент будет окрашен однородным прозрачным черным цветом.

Методы

void addColorStop(double offset, string color)

Метод addColorStop() определяет фиксированные цвета внутри градиента. В аргументе color передается строка с названием цвета в формате CSS. В аргументе offset передается значение с плавающей точкой в диапазоне от 0.0 до 1.0, которое представляет позицию между началом и концом градиента. Значение 0 соответствует начальной позиции, значение 1 - конечной.

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

 

CanvasPattern

шаблон заполнения холста на основе готового изображения

Объект CanvasPattern возвращается методом createPattern() объекта CanvasRenderingContext2D . Объект CanvasPattern может использоваться в качестве значения свойств strokeStyle и fillStyle объекта CanvasRenderingContext2D .

 

CanvasRenderingContext2D

объект, используемый для создания изображений

Объект CanvasRenderingContext2D предоставляет набор свойств и методов для рисования двухмерных графических изображений. Следующие разделы содержат краткий обзор его возможностей. Дополнительная информация приводится в разделе 21.4, а также в справочных статьях Canvas, CanvasGradient, CanvasPattern, ImageData и TextMetrics .

Создание и отображение контуров

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

Для построения связанной фигуры из отдельных сегментов для каждой промежуточной операции рисования должна быть определена точка присоединения. Для этой цели Canvas поддерживает текущую позицию. Операции рисования неявно используют ее в качестве начальной точки и обычно переустанавливают текущую позиции в свою конечную точку. Это можно представить себе как перемещение пера по листу бумаги: когда заканчивается рисование отдельной линии, текущей становится позиция, в которой было остановлено движение пера.

Существует возможность создать в текущем контуре несколько несвязанных фигур, которые должны отображаться с одними и теми же параметрами рисования. Для отделения фигур используется метод moveTo(); он перемещает текущую позицию в новые координаты без добавления линии, связывающей точки. Когда вызывается этот метод, создается новый вложенный контур, или подконтур, который в терминах элемента Canvas используется для объединения связанных операций.

Из доступных операций рисования можно упомянуть: lineТо() - рисование отрезков прямых линий, rect() - рисование прямоугольников, агс() и arcTo() - рисование дуг, bezierCurveTo() и quadraticCurveTo() - рисование кривых.

Как только требуемый контур сформирован, нарисовать фигуру в виде ограничивающих линий можно методом stroke() , а залить внутреннюю область фигуры - методом fill(); можно также вызвать оба метода.

Помимо рисования линий и заливки фигур текущий контур можно использовать как область отсечки. Пикселы в пределах этой области будут отображаться, за ее пределами - нет. Область отсечки обладает свойством накапливать изменения - вызов метода clip() для создания области отсечки, пересекающейся с текущей, приводит к созданию новой объединенной области.

Если сегменты в любом из вложенных контуров не формируют замкнутую фигуру, операции fill() и clip() неявно замыкают их, добавляя виртуальный (невидимый) отрезок прямой линии, соединяющий начальную и конечную точки контура. Чтобы явно добавить такой сегмент и тем самым замкнуть фигуру, следует вызвать метод closePath(). Чтобы проверить, находится ли точка внутри (или на границе) текущего контура, можно использовать метод isPointInPath(). Когда контур пересекает сам себя или состоит из нескольких накладывающихся друг на друга подконтуров, понятие «внутри» определяется правилом сохранения знака. Если нарисовать одну окружность внутри другой и обе рисовать в одном и том же направлении, все, что находится внутри большей окружности, будет считаться внутренней областью контура. Если, напротив, одну окружность нарисовать по часовой стрелке, а другую - против часовой стрелки, получится кольцо, и внутренняя область меньшей окружности будет считаться за пределами контура. Это же определение внутренней области используется методами fill() и сlір() .

Цвета, градиенты и шаблоны

При заполнении или рисовании границ фигуры существует возможность указать, каким образом должны заполняться линии или ограниченная ими область, для чего используются свойства fillStyle и strokeStyle . Оба эти свойства могут принимать строку со значением цвета в формате CSS, а также объект CanvasGradient или CanvasPattern , который описывает градиент или шаблон. Для создания градиента используется метод createLinearGradient() или createRadialGradient(), для создания шаблона - метод createPattern().

Непрозрачный цвет в нотации CSS задается строкой в формате #RRGGBB, где RR, GG и BB - это шестнадцатиричные цифры, определяющие интенсивность красной (red), зеленой (green) и синей (blue) составляющих в диапазоне от 00 до FF. Например ярко-красный цвет описывается строкой «#FF0000». Чтобы определить степень прозрачности цвета, используется строка в формате «rgba(R, G, В, А)». В такой нотации R, G и В определяют интенсивность красной, зеленой и синей составляющих цвета в виде десятичных чисел в диапазоне от 0 до 255, а А - альфа-компонент (прозрачность), как число с плавающей точкой в диапазоне от 0.0 (полностью прозрачный цвет) до 1.0 (полностью непрозрачный цвет). Например, полупрозрачный ярко-красный цвет описывается строкой «rgba(255, 0, 0, 0.5)».

Толщина, окончания и сопряжение линий

Элемент Canvas имеет несколько свойств, с помощью которых можно определить различные варианты отображения линий. Толщину линий можно указать с помощью свойства lineWidth , окончания линий - с помощью свойства liпеСар , сопряжения линий - с помощью свойства lineJoin .

Рисование прямоугольников

Нарисовать и заполнить прямоугольник можно с помощью методов strokeRect() и fillRect() . Кроме того, методом clearRect() можно очистить прямоугольную область.

Рисование изображений

В API объекта Canvas изображения определяются с помощью объектов Image , которые представляют HTML-теги или невидимые изображения, созданные с помощью конструктора Image() (дополнительную информацию см. в справочной статье Image). Кроме того, в качестве объекта-источника изображения могут использоваться элементы и

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

Рисование текста

Метод fillText() рисует текст, а метод strokeText() рисует контуры букв, составляющих текст. Используемый шрифт определяется свойством font ; значение этого свойства должно быть строкой определения шрифта в формате CSS. Выравнивание текста относительно указанной координаты X по левому краю, по правому краю или по центру определяется с помощью свойства textAlign , а выравнивание относительно указанной координаты Y - с помощью свойства textBaseline .

Система координат и преобразования

По умолчанию начало системы координат холста находится в точке (0,0), в верхнем левом углу, когда координата X растет в направлении к правой границе, а координата Y - к нижней. Атрибуты width и height тега определяют максимальные значения координат X и Y, а одна элементарная единица измерения в системе координат обычно соответствует одному пикселу.

Однако существует возможность преобразовать систему координат, вызывая смещение, масштабирование или вращение системы координат в операциях рисования. Делается это с помощью методов translate(), scale() и rotate(), которые оказывают влияние на матрицу преобразования холста. Поскольку система координат может подвергаться подобным преобразованиям, значения координат, которые передаются методам, таким как lineTo(), могут не соответствовать количеству пикселов. По этой причине для определения координат в API объекта Canvas используются не целые, а вещественные числа.

Тени

Объект CanvasRenderingContext2D может автоматически добавлять тени к любым создаваемым фигурам. Цвет тени задается с помощью свойства shadowColor , а ее смещение-с помощью свойств shadowOffsetX и shadowOffsetY . Кроме того, с помощью свойства shadowBlur можно определить степень размытия краев тени.

Композиция

Обычно при рисовании на холсте новые фигуры накладываются поверх ранее нарисованных, частично или полностью скрывая их, в зависимости от степени прозрачности новых фигур. Процесс объединения новых пикселов со старыми называется «композицией», и, указывая различные значения в свойстве globalCompositeOperation , можно управлять порядком объединения пикселов. Например, это свойство можно установить так, что новые фигуры будут рисоваться под существующими.

В следующей таблице перечислены допустимые значения свойства и их смысл. Под исходными в таблице подразумеваются пикселы, которые рисуются в настоящий момент, под целевыми - существующие пикселы. Под результирующими - пикселы, которые получаются в результате объединения исходных и целевых пикселов. В формулах символом S обозначается исходный (source) пиксел, символом D - целевой (destination) пиксел, символом R - результирующий (result) пиксел, символом as - альфа-компонент (уровень непрозрачности) исходного пиксела, и символом ad - альфа-компонент целевого пиксела:

Сохранение значений графических параметров

Методы save() и restore() позволяют сохранять и восстанавливать параметры объекта CanvasRenderingContext2D . Метод save() помещает параметры на вершину стека, а метод restore() снимает последние сохраненные параметры с вершины стека и делает их текущими.

Сохраняются все свойства объекта CanvasRenderingContext2D (за исключением свойства canvas , которое является константой). Матрица преобразования и область отсечки также сохраняются на стеке, но текущий контур и позиция пера не сохраняются.

Манипулирование пикселами

Метод getlmageData() позволяет получить массив пикселов холста, а метод putlmageData() дает возможность устанавливать отдельные пикселы. Эти методы могут пригодиться, если потребуется реализовать обработку изображений на языке JavaScript.

Свойства

readonly Canvas canvas

Элемент Canvas , который будет использоваться для создания изображения,

any fillStyle

Текущий цвет, шаблон или градиент, используемый для заполнения. Это свойство может принимать строковое значение либо объект CanvasGradient или CanvasPattern . По умолчанию заливка выполняется сплошным черным цветом

string font

Шрифт, используемый методами рисования текста. Для определения значения этого свойства используется тот же синтаксис, что и при определении значения CSS-атрибута font . Значение по умолчанию: «10рх sans-serif». Если размер шрифта в строке указан в таких единицах, как «еm» или «ех», или используются ключевые слова, определяющие относительные значения, такие как «larger», «smaller», «bolder» или «lighter», они интерпретируются относительно вычисленного CSS-стиля шрифта элемента .

double globalAlpha

Определяет дополнительный уровень прозрачности, который будет добавляться ко всему, что будет нарисовано на холсте. Значение альфа-компонента всех пикселов, рисуемых на холсте, будет умножаться на значение этого свойства. Диапазон значений от 0.0 (полностью прозрачный) до 1.0 (значение по умолчанию: не добавляет дополнительную прозрачность).

string globalCompositeOperation

Определяет порядок смешения («композиции») цветов на холсте. Обычно это свойство бывает полезным только при работе с полупрозрачными цветами или когда изменяется значение свойства globalAlpha . Значение по умолчанию: «source-over». Также часто используются значения «destination-over» и «сору». Перечень допустимых значений приводится в таблице выше. Обратите внимание, что на момент написания этих строк броузеры по-разному выполняли некоторые виды композиции: некоторые выполняли композицию локально, а некоторые - глобально. Подробности приводятся в разделе 21.4.13.

string linеСар

Определяет, как должны оканчиваться отображаемые линии. Устанавливать это свойство имеет смысл только при рисовании толстых линий. Допустимые значения перечислены в следующей таблице. Значение по умолчанию: «butt».

string lineJoin

Когда контур включает вершины, где соединяются прямые линии и/или кривые, свойство lineJoin определяет, как должны рисоваться эти вершины. Действие этого свойства проявляется только при рисовании толстых линий.

Значение по умолчанию, «miter», указывает, что внешние края двух линий в точке сопряжения должны быть продолжены, пока они не пересекутся. Когда две линии сопрягаются под очень острым углом, область сопряжения может оказаться достаточно длинной. Ограничить максимальную длину такого варианта сопряжения можно с помощью свойства miterLimit . Когда длина сопряжения превышает этот предел, сопряжение просто усекается.

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

double lineWidth

Определяет толщину линий для операций рисования. Значение по умолчанию - 1. Широкие линии центрируются по воображаемой линии контура на половину толщины в одну сторону и на половину толщины в другую,

double miterLimit

Когда линии сопрягаются под очень острым углом и при этом свойство lineJoin установлено в значение «miter», область сопряжения может оказаться достаточно длинной. Слишком длинная область сопряжения может выглядеть достаточно некрасиво. Свойство miterLimit позволяет определить максимальную длину сопряжения. Величина этого свойства выражает отношение длины области сопряжения к толщине линий. Значение по умолчанию - 10, оно означает, что область сопряжения по длине никогда не должна превышать толщину линий более чем в 5 раз. Когда длина сопряжения превышает этот предел, оно просто усекается,

double shadowBlur

Определяет степень размытия краев тени. Значение по умолчанию - 0; при этом тень воспроизводится с резкими краями. Чем больше значение, тем более размытый край тени получается. Имейте в виду, что это значение измеряется не в пикселах и не подвержено действию текущего преобразования системы координат,

string shadowColor

Определяет цвет тени в формате CSS. По умолчанию используется черный прозрачный цвет,

double shadowOffsetX

double shadowOffsetY

Определяют горизонтальное и вертикальное смещение теней. Чем больше смещение, тем выше объект с тенью кажется расположенным над фоном. Значение по умолчанию: 0. Эти значения измеряются в единицах системы координат и не зависят от текущего преобразования,

any strokeStyle

Определяет цвет, шаблон или градиент, используемый для рисования контуров. Это свойство может принимать строку с обозначением цвета в формате CSS либо объект CanvasGradient или CanvasPattern .

string textAlign

Определяет выравнивание текста по горизонтали относительно координаты X, передаваемой методам fillText() и strokeText(). Допустимыми значениями являются «left», «center», «right», «start» и «end». Смысл значений «start» и «end» зависит от атрибута dir (направление письма) тега . Значение по умолчанию - «start»,

string textBaseline

Определяет выравнивание текста по вертикали относительно координаты Y, передаваемой методам fillText() и strokeText() . Допустимыми значениями являются «top», «middle», «bottom», «alphabetic», «hanging» и «ideographic». Значение по умолчанию - «alphabetic».

Методы

void arc(double x,у,radius,startAngle,endAngle, [boolean anticlockwise])

Добавляет в текущий подконтур дугу с заданными центром окружности и радиусом. Первые три аргумента этого метода описывают координаты центра и радиус окружности. Следующие два аргумента- это углы, определяющие начальную и конечную точки дуги на окружности. Углы измеряются в радианах. Позиция, соответствующая трем часам на циферблате, т.е. положительной оси X, имеет угол 0. Углы увеличиваются по направлению часовой стрелки. Последний аргумент определяет направление рисования дуги - против часовой стрелки (true) или по часовой стрелке (false).

void arcTo(double x1, y1, x2, y2, radius)

Добавляет в текущий подконтур прямую линию и дугу, описывая эту дугу таким образом, что этот метод особенно удобно использовать для рисования закругленных углов многоугольников. Аргументы х1 и у1 определяют точку Р1, а аргументы х2 и у2 - точку Р2. Дуга, добавляемая в контур, является частью окружности с радиусом radius. Начальная точка дуги соответствует точке пересечения с касательной, соединяющей текущую позицию пера и точку Р1, а конечная соответствует точке пересечения с касательной, соединяющей точки Р1 и Р2. Дуга соединяет начальную и конечную точки в кратчайшем направлении. Перед добавлением дуги в контур этот метод добавляет отрезок прямой линии, соединяющий текущую позицию пера с начальной точкой дуги. После вызова этого метода текущей позицией пера является конечная точка дуги, расположенная на линии между точками Р1 и Р2.

Нарисовать квадрат размером 100 х 100 с закругленными углами (с разными радиусами), с помощью объекта контекста с можно следующим образом:

с.beginPath();

c.moveTo(150, 100);           // Начать с середины верхнего края

с.агсТо(200,100, 200,200,40); // Верхний край и закругленный правый верхний угол

с.агсТо(200,200,100,200,30);  // Правый край и правый нижний угол с закруглением

                              // меньшего радиуса

с.агсТо(100,200,100,100, 20); // Нижний край и закругленный левый нижний угол

с.агсТо(100,100,200,100,10);  // Левый край и закругленный левый верхний угол

с.closePath();                // Нарисовать отрезок до начальной точки.

c.stroke();                   // Вывести контур

void beginPath()

Метод beginPath() отменяет любое существующее определение контура и начинает новый. После вызова beginPath() текущая позиция пера не определена.

При создании в первый раз объекта контекста холста неявно вызывается метод beginPath() .

void bezierCurveTo(double ср1х, ср1у,ср2х, ср2у, х, у)

Метод bezierCurveTo() добавляет в текущий подконтур холста кривую Безье третьего порядка. Начальная точка кривой находится в текущей позиции пера, а координаты конечной точки определяются аргументами х и у. Форма кривой Безье определяется контрольными точками (срХ1, cpY1) и (срХ2, cpY2). По возвращении из метода текущей позицией становится точка (х, у).

void clearRect(double х, у, width, height)

Метод clearRect() выполняет заливку указанной прямоугольной области черным прозрачным цветом. В отличие от метода rect(), он не изменяет текущую позицию пера и текущий контур,

void clip()

Вычисляет пересечение внутренней области текущего контура с текущей областью отсечки и использует эту полученную область как новую область отсечки. Обратите внимание, что нет никакого способа увеличить область отсечки. Если область отсечки требуется лишь на время, сначала следует вызвать метод save(), чтобы затем с помощью restore() восстановить прежнюю область отсечки. По умолчанию область отсечки совпадает с границами холста.

void GlosePath()

Если текущий подконтур еще не был замкнут, метод сlosePath() замыкает его добавлением линии, соединяющей текущую и начальную точки контура. После чего начинает новый подконтур (как если бы был вызван метод moveTo() ) в текущей точке  Методы fill() и clip() считают все подконтуры замкнутыми, поэтому явно вызывать метод closePath() необходимо, только если требуется нарисовать замкнутый контур.

ImageData createImageData(ImageData imagedata)

Возвращает новый объект ImageData с теми же размерами, что и data .

ImageData createImageData(double w, double h)

Возвращает новый объект ImageData с указанной шириной и высотой. Все пикселы внутри этого нового объекта ImageData инициализируются черным прозрачным цветом (все составляющие цвета и альфа-компонент имеют значение 0). Аргументы w и h определяют размеры изображения в CSS-пикселах. Реализациям разрешается отображать один CSS-пиксел в несколько аппаратных пикселов. Свойства width и height возвращаемого объекта ImageData определяют размер изображения в аппаратных пикселах, и их значения могут не совпадать со значениями аргументов w и h.

CanvasGradient createLinearGradient(double х0, у0, х1, у1)

Создает и возвращает новый объект CanvasGradient , который выполняет линейную интерполяцию цветов между заданными начальной и конечной точками. Обратите внимание: этот метод не определяет цвета градиента. Для этих целей следует использовать метод addColorStop() вновь созданного объекта. Чтобы рисовать линии или заполнять фигуры с помощью градиента, необходимо присвоить объект CanvasGradient свойству strokeStyle или fillStyle .

CanvasPattern createPattern(Element image, string repetition)

Создает и возвращает объект CanvasPattern шаблона, определяющего повторяющееся изображение. Аргумент image должен быть элементом , или

Чтобы рисовать линии или заполнять фигуры с использованием шаблона, необходимо присвоить объект CanvasPattern свойству strokeStyle или fillStyle .

CanvasGradient createRadialGradient(double x0, y0, r0, x1, y1, r1)

Создает и возвращает новый объект CanvasGradient , который выполняет радиальную интерполяцию цветов между двумя заданными окружностями. Обратите внимание: этот метод не определяет цвета градиента. Для этих целей следует использовать метод addColorStop() вновь созданного объекта. Чтобы рисовать линии или заполнять фигуры с помощью градиента, необходимо присвоить объект СапvasGradient свойству strokeStyle или fillStyle .

Радиальные градиенты отображаются с использованием цвета со смещением 0 для первой окружности, со смещением 1 для второй окружности и интерполированными цветами (красная, зеленая и синяя составляющие, а также альфа-компонент) для рисования промежуточных окружностей.

void drawImage(Element image, double dx, dy, [dw, dh])

Копирует изображение в аргументе image (значением которого должен быть элемент , или

void drawImage(Element image, double sx, sy, sw, sh, dx, dy, dw, dh)

Эта версия метода drawImage() копирует прямоугольную область изображения image в заданную область холста. Значением аргумента image должен быть элемент , или

void fill()

Метод fill() выполняет заливку текущего контура цветом, градиентом или шаблоном, заданным свойством fillStyle . Любой незамкнутый подконтур заполняется так, как если бы для него неявно был вызван метод closePath(). (Обратите внимание: это не означает, что вызов этого метода сделает подконтур замкнутым.) Операция заливки текущего контура не очищает его. Можно сразу вслед за методом fill() вызвать метод stroke() без повторного определения пути.

Когда контур пересекает сам себя или состоит из нескольких накладывающихся друг на друга подконтуров, метод fill() пользуется правилом ненулевого числа оборотов для определения, какие точки находятся внутри, а какие вне контура. Это означает, например, что если контур определяет квадрат внутри окружности и подконтур квадрата нарисован в направлении, противоположном направлению рисования окружности, то область внутри квадрата будет считаться лежащей вне контура и не будет заполняться.

void fillRect(double х, у, width, height)

Метод fillRect() выполняет заливку заданного прямоугольника цветом, градиентом или шаблоном, который задается свойством fillStyle .

В отличие от метода rect(), метод fillRect() не влияет на текущую позицию пера и текущий контур.

void fillText(string text, double x, у, [double maxWidth])

Метод fillText() рисует текст text , используя текущие значения свойств font и fillStyle . Аргументы х и у определяют координаты, где должен выводиться текст, но интерпретация этих аргументов зависит от свойств textAlign и textBaseline , соответственно.

Если свойство textAlign имеет значение «left» или «start» (по умолчанию), в случае использования направления для письма слева направо (также по умолчанию), или «end» в случае использования письма справа налево, текст выводится правее указанной координаты X. Если свойство textAlign имеет значение «center», текст центрируется по горизонтали относительно указанной координаты X. В противном случае (если textAlign имеет значение «right», «end» для письма слева направо или «start» для письма справа налево) текст выводится левее указанной координаты X. Если свойство textBaseline имеет значение «alphabetic» (по умолчанию), «bottom» или «ideographic», большинство символов будут нарисованы выше указанной координаты Y. Если свойство textBaseline имеет значение «center», текст будет центрироваться по вертикали относительно указанной координаты Y. А если свойство textBaseline имеет значение «top» или «hanging», большинство символов будут нарисованы ниже указанной координаты Y.

Необязательный аргумент maxWidth определяет максимальную ширину текста. Если текст в аргументе text окажется шире, чем определено аргументом maxWidth , он будет нарисован более мелким или более узким шрифтом.

ImageData getImageData(double sx, sy, siv, sh)

Аргументы этого метода определяют непреобразованные координаты прямоугольной области холста. Метод копирует пикселы из этой области холста в новый объект ImageData и возвращает этот объект. Как получить доступ к составляющим цвета и альфа-компонентам отдельных пикселов, описывается в справочной статье ImageData .

Компоненты RGB цвета возвращаемых пикселов не учитывают значение альфа-компонента. Если какая-либо часть запрошенной области оказывается за границами холста, соответствующие пикселы в объекте ImageData устанавливаются в черный прозрачный цвет (все компоненты цвета равны нулю). Если для представления одного CSS-пиксела реализация использует несколько аппаратных пикселов, значения свойств width и height возвращаемого объекта ImageData будут отличаться от значений аргументов sw и sh.

Подобно методу Canvas.toDataURL(), этот метод препятствует утечке информации между доменами. Метод getlmageData() возвращает объект ImageData , только если изображение в холсте имеет общее происхождение с документом; в противном случае он возбуждает исключение. Считается, что холст не имеет общего происхождения с документом, если в нем содержалось изображение (созданное непосредственно с помощью метода drawlmage() или косвенно, с помощью объекта CanvasPattern ), имеющее иное происхождение, отличное от происхождения содержащего его документа. Кроме того, считается, что элемент имеет неясное происхождение, если в нем рисовался текст с использованием веб-шрифтов, имеющих иное происхождение.

boolean isPointInPath(double х, у)

Метод isPointlnPath() возвращает true, если указанная точка попадает в пределы текущего контура; в противном случае он возвращает false. Указанные координаты интерпретируются в системе координат, не преобразованной с применением текущей матрицы преобразования. Аргумент х должен иметь значение между 0 и canvas.width , а аргумент у - между 0 и canvas.height .

Причина, почему isPointlnPath() использует непреобразованные координаты, состоит в том, что он предназначен для «проверки попадания»: определения попадания указателя мыши во время щелчка (например) в область холста, ограниченную контуром. Чтобы выполнить проверку попадания, координаты указателя мыши сначала должны быть преобразованы из координат окна в координаты холста. Если экранные размеры холста отличаются от размеров, определяемых атрибутами width и height (например, в случае установки атрибутов style.width и style.height ), координаты указателя мыши также необходимо привести к масштабу, соответствующему масштабу системы координат холста. Ниже демонстрируется функция, которая может использоваться как обработчик onclick элемента и выполнять необходимые преобразования координат указателя мыши в координаты холста:

// Обработчик onclick для тега . Предполагается, что текущий контур определен.

function hittest(event) {

  var canvas = this; // Вызывается в контексте холста

  var с = canvas.getContext("2d"); // Получить контекст рисования для холста

  // Получить размеры и координаты холста var bb = canvas.getBoundingClientRect();

  // Преобразовать координаты указателя мыши в координаты холста

  var х = (event.clientX-bb.left)*(canvas.width/bb.width);

  var у = (event.clientY-bb.top)*(canvas.height/bb.height);

  // Залить контур, если пользователь щелкнул в его пределах

  if (с.isPointInPath(x,у)) с.fill();

}

void lineTo(double x, double y)

Метод lineTo() добавляет прямую линию в текущий подконтур. Линия начинается в текущей позиции пера и заканчивается в точке с координатами (х,у). Когда этот метод возвращает управление, текущая позиция перемещается в точку (х,у).

TextMetrics measureText(string text)

Метод measureText() вычисляет ширину текста text, которую он займет при рисовании с текущим значением свойства font , и возвращает объект TextMetrics , содержащий результаты вычислений. На момент написания этих строк возвращаемый объект имел только одно свойство, width , а высота текста и параметры описывающего прямоугольника не вычислялись.

void moveTo(double х, double у)

Метод moveTo() переносит текущую позицию пера в точку (х,у) и создает новый подконтур с начальной точкой в этой точке. Если перед этим существовал подконтур, состоящий из единственной точки, этот пустой подконтур удаляется из текущего контура.

void putImageData(ImageData imagedata, double dx t dy, [sx, sy, sw, sh])

Метод putImageData() копирует прямоугольную область из объекта ImageData в холст. Он выполняет низкоуровневую операцию копирования пикселов, игнорируя значения свойств globalCompositeOperation и globalAlpha , а также область отсечки, матрицу преобразования и атрибуты, управляющие отображением тени.

Аргументы dx и dy определяют координаты назначения в холсте. Пикселы из объекта в аргументе imagedata будут копироваться в холст, начиная с этой точки. Значения этих аргументов не подвергаются преобразованию с применением текущей матрицы преобразования.

Последние четыре аргумента определяют исходную прямоугольную область в объекте ImageData . Скопированы будут только пикселы из указанной прямоугольной области. Если эти аргументы отсутствуют, объект ImageData  будет скопирован целиком. Если эти аргументы определяют прямоугольник, выходящий за границы объекта ImageData , прямоугольник будет обрезан по этим границам. В аргументах sx и sy допускается передавать отрицательные значения.

Одна из ролей объектов ImageData - служить «временным хранилищем» для содержимого холста. Сохранение копии холста (с использованием метода getImageData()) позволяет временно наносить на холст изображения и затем восстанавливать прежнее состояние холста с помощью putlmageData().

void quadraticCurveTo(double срх, еру, х, у)

Данный метод добавляет кривую Безье второго порядка в текущий подконтур. Начальная точка кривой находится в текущей позиции, а координаты конечной точки определяются аргументами х и у. Форма кривой Безье, соединяющей эти две точки, определяется контрольной точкой (срХ, cpY). По возвращении из метода текущей позицией становится точка (х,у). Обратите также внимание на метод bezierCurveTo().

void rect(double х, у, tv, h)

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

с.moveTo(x,у);

с.lineTo(x+w, у);

с.lineTo(x+w, y+h);

c.lineTo(x, y+h);

c.closePath();

void restore()

Метод снимает с вершины стека значения параметров холста и записывает их в свойства объекта CanvasRenderingContext2D , восстанавливая область отсечки и матрицу преобразования. Дополнительные сведения см. в справочной статье save().void

rotate(double angle)

Данный метод изменяет текущую матрицу преобразования таким образом, что любые фигуры, нарисованные после вызова этого метода, выглядят повернутыми на указанный угол. Этот метод не выполняет вращение самого элемента . Обратите внимание: угол задается в радианах. Чтобы преобразовать градусы в радианы, нужно умножить величину угла на константу Math. PI и разделить на число 180.

void save()

Метод save() помещает копию текущих параметров холста на вершину стека сохраняемых параметров. Это позволяет внести временные изменения в какие-либо параметры и затем восстановить предыдущие значения вызовом метода restore(). В перечень сохраняемых параметров входят все свойства объекта CanvasRenderingContext2D (за исключением доступного только для чтения свойства canvas ), а также матрица преобразования, которая является результатом вызова методов rotate(), scale() и translate() . Кроме того, в стеке сохраняется область отсечки, созданная методом clip() . Однако следует заметить, что текущие контур и позиция пера не входят в данный перечень и этим методом не сохраняются,

void scale(double sx, double sy)

Метод scale() добавляет преобразование масштаба в текущую матрицу преобразования холста. Масштабирование выполняется отдельно по горизонтали и по вертикали. Например, если передать методу значения 2.0 и 0.5, все последующие фигуры будут иметь в два раза большую ширину и в два раза меньшую высоту по сравнению с тем, как они выглядели бы, если бы они были нарисованы до вызова метода scale(). Отрицательные значения аргумента sx вызывают зеркальное отражение координат относительно оси Y, а отрицательные значения аргумента sy вызывают зеркальное отражение координат относительно оси X.

void setTransform(double a, b, с, d, е, f)

Этот метод позволяет напрямую установить матрицу преобразования, не выполняя последовательность вызовов методов translate(), scale() и rotate(). После вызова этого метода новое преобразование будет иметь вид:

х'   а с е   х = ах+су+е

y' = b d f x y = bx+dy+f

1    0 0 1   1

void stroke()

Метод stroke() выполняет рисование линий, составляющих текущий контур. Контур определяет лишь геометрию линии, которая должна быть воспроизведена, а визуальное ее представление зависит от значений свойств strokeStyle, lineWidth, lineCap, lineJoin и miterLimit .

Под термином stroke (чертить) понимается вычерчивание линий пером или кистью. Это означает «нарисовать контур». В противовес методу stroke(), метод fill() выполняет заливку внутренней области без рисования ее контура,

void strokeRect(double х, у, tv, h)

Рисует контур (не выполняя заливку внутренней области) прямоугольника с заданными координатами и размерами. Цвет и толщина линий определяются значениями свойств strokeStyle и lineWidth . Стиль оформления сопряжений в углах прямоугольника определяется значением свойства lineJoin .

В отличие от метода rect(), метод strokeRect() не оказывает влияния на текущий контур или текущую позицию пера,

void strokeText(string text, double x, у, [maxWidth])

Метод strokeText() действует подобно методу fillText(), за исключением того, что он не выполняет заливку отдельных символов в соответствии со значением свойства fillStyle , а рисует только контуры каждого символа, учитывая значение свойства strokeStyle . Для шрифтов большого размера метод strokeText() обеспечивает интересный графический эффект, но на практике для рисования текста чаще используется метод fillText().

void transform(double a, b, с, d, е, f)

Аргументы этого метода определяют шесть нетривиальных элементов матрицы Т аффинного преобразования размером 3x3:

а с е

b d f

0 0 1

Метод transform() умножает текущую матрицу преобразования на матрицу Т и принимает результат в качестве текущей матрицы преобразования:

СТМ' = СТМ X T

В терминах универсального метода transform() можно реализовать операции смещения, масштабирования и вращения. Чтобы выполнить смещение, можно произвести вызов transform(1,0,0,1,dx,dy) . Чтобы выполнить масштабирование - transform(sx, 0, 0, sy, 0, 0) . Для выполнения вращения по часовой стрелке на угол х:

transform(cos(x),sin(x),-sin(x), cos(x), 0, 0)

Чтобы выполнить сдвиг параллельно оси X на множитель к, можно произвести вызов transform(1,0,k,1,0,0). Сдвига параллельно оси Y можно добиться вызовом transform(1, k, 0,1,0,0) .

void translate(double х, double у)

Метод translate() добавляет горизонтальное и вертикальное смещения в матрицу преобразования холста. Значения аргументов х и у добавляются к координатам всех точек, которые затем будут добавляться в контур.

 

ClientRect

прямоугольник, описанный вокруг элемента

Объект ClientRect описывает прямоугольник в системе координат объекта Window или видимой области. Объект этого типа, определяющий параметры описанного прямоугольника элемента, возвращает метод getBoundingClientRect() объекта Element . Объекты ClientRect являются статическими: они не изменяются при изменении соответствующих им элементов.

Свойства

readonly float bottom

Координата Y нижней границы прямоугольника относительно видимой области.

readonly float height

Высота прямоугольника в пикселах. В IE версии 8 и ниже это свойство не определено; вместо него следует использовать выражение bottom-top .

readonly float left

Координата X левой границы прямоугольника относительно видимой области.

readonly float right

Координата X правой границы прямоугольника относительно видимой области.

readonly float top

Координата Y верхней границы прямоугольника относительно видимой области.

readonly float width

Ширина прямоугольника в пикселах. В IE версии 8 и ниже это свойство не определено; вместо него следует использовать выражение right-left .

 

CloseEvent

определяет, был ли закрыт веб-сокет без ошибок (Event)

Когда закрывается соединение WebSocket , в объекте WebSocket возбуждается невсплывающее и неотменяемое событие «close», и всем зарегистрированным обработчикам этого события передается объект CloseEvent .

Свойства

readonly boolean wasClean

Если соединение WebSocket было закрыто управляемым способом, как определяется протоколом веб-сокетов, с подтверждением со стороны клиента и сервера, говорят, что закрытие было выполнено чисто, и это свойство имеет значение true. Если это свойство имеет значение false, веб-сокет мог быть закрыт в результате какой-либо сетевой ошибки.

 

Comment

HTML- или XML-комментарий (Node)

Узел Comment представляет комментарий в HTML- или XML-документе. Содержимое комментария (т. е. текст между ) доступно через свойство data или через свойство nodeValue , унаследованное от интерфейса Node . Создать объект Comment можно методом Document.createComment().

Свойства

string data

Текст комментария.

readonly unsigned long length

Количество символов в комментарии.

Методы

void appendData(string data)

void deleteData(unsigned long offset, unsigned long count)

void insertData(unsigned long offset, string data)

void replaceData(unsigned long offset, unsigned long count, string data)

string substringData(unsigned long offset, unsigned long count)

Узлы Comment обладают большинством методов узла Text , и эти методы действуют так же, как в случае с узлами Text . Они перечислены здесь, но их описание приводится в справочной статье Text.

 

Console

вывод отладочной информации

Современные броузеры (и более ранние версии, с установленными расширениями-отладчиками, такими как Firebug) определяют глобальное свойство console , ссылающееся на объект Console . Методы этого объекта образуют API для выполнения простых отладочных операций, таких как вывод сообщений в окно консоли (консоль можно открыть выбором пункта меню, такого как Developer Tools (Средства разработчика) или Web Inspector (Веб-консоль).

В настоящее время не существует официального стандарта, определяющего API объекта Console , но расширение Firebug для Firefox установило стандарт де-факто и производители броузеров стремятся реализовать прикладной интерфейс Firebug, описанный здесь. Поддержка базовой функции console.log() реализована практически повсеместно, но реализация других функций может присутствовать не во всех броузерах. Имейте в виду, что в некоторых старых броузерах свойство console определено, только если открыто окно консоли, и сценарии, использующие объект Console , когда окно консоли не открыто, будут вызывать появление ошибок.

См. также ConsoleCommandLine.

Методы

void assert(any expression, string message)

Выводит сообщение об ошибке message в консоли, если выражение expression имеет значение false или любое ложное значение, такое как null, undefined, 0 или пустая строка.

void count([string title])

Выводит строку title вместе со счетчиком вызовов данного метода с этой же строкой.

void debug(any message...)

Действует подобно методу console.log(), но помечает вывод, как отладочную информацию,

void dir(any object)

Выводит в консоли информацию об объекте в виде, позволяющем разработчику проверить свойства или элементы и в интерактивном режиме исследовать вложенные объекты и элементы массивов,

void dirxml(any node)

Выводит в консоль разметку XML или HTML узла документа,

void error(any message...)

Действует подобно методу console.log(), но помечает вывод как ошибку,

void group(any message...)

Выводит сообщение message подобно методу log(), но отображает его как заголовок свертываемой группы отладочных сообщений. Все последующие операции вывода в консоль будут помещать сообщения в эту группу, пока не будет вызван соответствующий метод groupEnd() .

void groupCollapsed(any message...)

Создает новую группу сообщений, но в свернутом состоянии, так что по умолчанию последующие отладочные сообщения будут скрыты.

void groupEnd()

Закрывает самую последнюю группу отладочных сообщений, созданную вызовом метода group() или groupCollapsed() .

void info(any message...)

Действует подобно методу console. log(), но помечает вывод как информационное сообщение.

void log(string format, any message...)

Выводит свои аргументы в консоль. В простейшем случае, когда строка format не содержит спецификаторов, начинающихся с символа %, метод просто преобразует свои аргументы в строки и выводит их, отделяя друг от друга пробелами. Когда методу передается объект, строка, выведенная в консоль, будет доступна для щелчка мышью и позволит просматривать содержимое объекта.

Для вывода более сложных сообщений данный метод поддерживает простейшие спецификаторы формата функции printf() из языка С. Аргументы message будут интерполироваться в аргумент format, на место последовательностей символов «%s», «%d», «%і», «%f» и «%о», после чего в консоль будет выведена отформатированная строка (со следующими за ней аргументами message, для которых отсутствуют спецификаторы в аргументе format). Аргументы, соответствующие спецификатору «%s», форматируются как строки. Аргументы, соответствующие спецификаторам «%d» и «%і», форматируются как целые числа. Соответствующие спецификатору «%f» форматируются как вещественные числа, а соответствующие спецификатору «%о» - как объекты, доступные для щелчка мышью,

void profile([string title])

Запускает профилировщик JavaScript и в начале отчета отображает строку title.

void profileEnd()

Останавливает профилировщик и выводит отчет с результатами профилирования программного кода.

void time(string name)

Запускает таймер с именем name.

void timeEnd(string name)

Останавливает таймер с именем name и выводит имя и время, прошедшее с момента вызова соответствующего метода time() .

void trace()

Выводит трассировку стека.

void warn(any message...)

Действует подобно методу console.log() , но помечает вывод как предупреждение.

 

ConsoleCommandLine

глобальные утилиты для работы с окном консоли

Большинство веб-броузеров поддерживают консоль JavaScript (которую вы, возможно, знаете как «Средства разработчика» («Developer Tools») или «Веб-консоль» («Web Inspector»), которая позволяет вводить одиночные строки программного кода на языке JavaScript. В дополнение к обычным глобальным переменным и функциям клиентского JavaScript командная строка консоли обычно поддерживает полезные свойства и функции, описываемые здесь.

См. также Console.

Свойства

readonly Element $0

Элемент документа, выбранный последним некоторыми средствами отладчика.

readonly Element $1

Элемент документа, выбранный перед элементом $0.

Методы

void cd(Window frame)

Когда документ включает вложенные фреймы, функция cd() позволяет переключать глобальные объекты и выполнять последующие команды в области видимости фрейма frame.

void clear()

Очищает окно консоли,

void dir(object о)

Выводит свойства или элементы объекта или массива о. Действует подобно методу Console.dir() .

void dirxml(Element elt)

Выводит разметку XML или HTML элемента elt. Действует подобно методу Console.dirxml() .

Element $(string id)

Краткий псевдоним функции document.getElementByld().

NodeList $$(string selector)

Возвращает объект, подобный массиву, содержащий все элементы, соответствующие CSS-селектору selector. Это краткий псевдоним функции document.querySelectorAll() . В некоторых броузерах возвращает настоящий массив, а не объект NodeList .

void inspect(any object, [string tabname])

Отображает объект object , при этом может переключаться из консоли на другую вкладку отладчика. Во втором аргументе передается необязательная подсказка, определяющая, как должен отображаться объект object . Поддерживаются значения: «html», «css», «script» и «dom».

string[] keys(any object)

Возвращает массив с именами свойств объекта object .

void monitorEvents(Element object, [string type])

Выводит сообщения о событиях типа type, доставляемых в объект object . В число поддерживаемых значений аргумента type входят: «mouse», «key», «text», «load», «form», «drag» и «contextmenu». Если аргумент type не указан, выводятся сообщения обо всех событиях в объекте object .

void profile(string title)

Запускает профилировщик программного кода. Действует подобно методу Console.profile() .

void profileEnd()

Останавливает профилировщик. Действует подобно методу Console.profileEnd() .

void unmonitorEvents(Element object, [string type])

Останавливает мониторинг событий типа type в объекте object .

any[] values(any object)

Возвращает массив значений свойств объекта object .

 

CSS2Properties

см. CSSStyleDeclaration

 

CSSRule

правило в таблице стилей CSS

Описание

Объект CSSRule является представлением правила в объекте таблице CSS-стилей CSSStyleSheet : он дает информацию о стилях, которые должны применяться к определенному набору элементов документа. Свойство selectorText - это строковое представление селектора элемента для данного правила, а свойство style - ссылка на объект CSSStyleDeclaration , который представляет набор атрибутов стилей, применяемых к выбранным элементам.

Иерархия подтипов CSSRule для представления различных видов правил, которые могут появляться в таблицах стилей, определяется в спецификации «CSS Object Model». Свойства, описанные здесь, являются универсальными для типа CSSRule и его подтипа CSSStyleRule . Правила стилей являются наиболее общими и наиболее важными типами правил в таблицах стилей и наиболее часто используемыми в сценариях.

В IE версии 8 и ниже в объектах CSSRule поддерживаются только свойства selectorText и style .

Константы

unsigned short STYLE_RULE = 1

unsigned short IMPORT_RULE =3

unsigned short MEDIA_RULE = 4

unsigned short FONT_FACE_RULE = 5

unsigned short PAGE_RULE = 6

unsigned short NAMESPACE.RULE = 10

Это допустимые значения свойства type , представленного ниже, и они определяют тип правила. Если свойство type имеет какое-либо значение, отличное от 1, объект CSSRule получит дополнительные свойства, не описываемые здесь.

Свойства

string cssText

Полный текст данного CSS-правила.

readonly CSSRule parentRule

Правило, если таковое имеется, в котором содержится данное правило,

readonly CSSStyleSheet parentStyleSheet

Таблица стилей, внутри которой содержится данное правило,

string selectorText

Когда свойство type имеет значение STYLE_RULE, это свойство хранит текст селектора, определяющего элементы документа, к которым применяется это правило.

readonly CSSStyleDeclaration style

Когда свойство type имеет значение STYLE_RULE, это свойство определяет стили, которые должны применяться к элементам, определяемым свойством selectorText . Обратите внимание: несмотря на то что свойство style доступно только для чтения, свойства объекта CSSStyleDeclaration , на которое оно ссылается, доступны для чтения и записи,

readonly unsigned short type

Тип данного правила. Значением этого свойства могут быть только константы, представленные выше.

 

CSSStyleDeclaration

набор CSS-атрибутов и их значения

Объект CSSStyleDeclaration представляет набор CSS-атрибутов стиля и их значения, и позволяет манипулировать этими атрибутами, используя имена свойств, похожие на имена CSS-свойств. Свойство style элемента HTMLElement является доступным для чтения и записи объектом CSSStyleDeclaration и подобно свойству style объекта CSSRule . Однако метод Window.getComputedStyle() возвращает объект CSSStyleDeclaration , свойства которого доступны только для чтения.

Объект CSSStyleDeclaration обеспечивает доступ к CSS-атрибутам стиля посредством свойств. Имена этих свойств практически однозначно соответствуют именам CSS-атрибутов, незначительно измененными для соответствия синтаксису языка JavaScript. Имена атрибутов, сконструированные из нескольких слов и содержащие дефисы, такие как «font-family», записываются без дефисов, а каждое слово, кроме первого, начинается с заглавного символа: fontFamily . Кроме того, имя атрибута «float» совпадает с зарезервированным словом float , поэтому оно преобразовано в имя свойства cssFloat .

Обратите внимание, что имеется возможность использовать неизмененные имена CSS-атрибутов, если для доступа к свойствам использовать строки и квадратные скобки.

Свойства

Помимо свойств, описанных выше, объект CSSStyleDeclaration имеет два дополнительных свойства:

string cssText

Текстовое представление набора атрибутов стиля и их значений. Текст форматируется, как в таблицах стилей CSS, за исключением селектора элемента и фигурных скобок, окружающих атрибуты и значения.

readonly unsigned long length

Количество пар атрибут/значение, содержащихся в данном объекте CSSStyleDeclaration . Объект CSSStyleDeclaration является также объектом, подобным массиву, элементами которого являются имена объявленных CSS-атрибутов стиля.

 

CSSStyleSheet

таблица стилей CSS

Этот интерфейс представляет таблицу стилей CSS. Он обладает свойствами и методами, позволяющими деактивировать таблицу стилей, читать, вставлять и удалять объекты правил CSSRule . Объекты CSSStyleSheet , которые применяются к документу, являются элементами массива styleSheets[] объекта Document и также доступны через свойство sheet элементов