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

Button

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

Объект

<b>Button</b>
представляет HTML-элемент
<b>&lt;button&gt;.</b>
Большинство свойств и методов объекта
<b>Button</b>
описываются в справочных статьях
<b>FormControl</b>
и
<b>Element</b>
. Однако, когда свойство
<b>type</b>
объекта
<b>Button</b>
(смотрите справочную статью
<b>FormControl</b>
) имеет значение «submit», другие свойства, перечисленные здесь, определяют параметры отправки формы, имеющие приоритет перед аналогичными свойствами формы, в которой находится кнопка
<b>Button</b>
(смотрите справочную статью
<b>FormControl</b>
).

Свойства

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

<b>&lt;button&gt;</b>
имеет атрибут
<b>type</b>
со значением «submit»,

<b>string formAction</b>

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

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

<b>string formEnctype</b>

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

<b>formenctype</b>
. Для кнопок, управляющих отправкой форм, это свойство переопределяет свойство
<b>enctype</b>
форм и может принимать те же значения,

<b>string formMethod</b>

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

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

<b>string formNoValidate</b>

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

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

<b>string formTarget</b>

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

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

Canvas

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

Объект

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

Свойства

<b>unsigned long height </b>

<b>unsigned long width</b>

Эти свойства соответствуют атрибутам

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

Если размер элемента

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

Методы

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

Возвращает объект, посредством которого выполняется рисование в элементе

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

Для каждого элемента

<b>&lt;canvas&gt;</b>
существует только один объект
<b>CanvasRenderingContext2D</b>
, т.е. повторные вызовы
<b>getContext(&quot;2d&quot;)</b>
будут возвращать тот же самый объект.

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

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

<b>CanvasRenderingContext2D</b>
.

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

Метод

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

<b>// Скопировать содержимое холста в элемент &lt;img&gt; и добавить его в документ</b>

<b>var canvas = document.getElementById(&quot;my_canvas&quot;);</b>

<b>var image = document.createElement(&quot;img&quot;);</b>