JavaScript. Подробное руководство, 6-е издание, Флэнаган Дэвид

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

на обложку

Флэнаган Дэвид

Шрифт:

string formNoValidate

Это свойство соответствует HTML-атрибуту

formnovalidate

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

noValidate

форм,

string formTarget

Это свойство соответствует HTML-атрибуту

formtarget

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

target

форм.

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>