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

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).

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); // Начать с середины верхнего края

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

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

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

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

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

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

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()

необходимо, только если требуется нарисовать замкнутый контур.