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

Свойства

  readonly Canvas canvas

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

  any fillStyle

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

  string font

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

  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 (направление письма) тега <canvas>. Значение по умолчанию - «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).