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

  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 должен быть элементом <img>, <canvas> или <video>, содержащим изображение, которое будет использоваться как шаблон. Аргумент repetition определяет, как будет выкладываться мозаика. Ниже перечислены допустимые значения:

Чтобы рисовать линии или заполнять фигуры с использованием шаблона, необходимо присвоить объект 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 (значением которого должен быть элемент <img>, <canvas> или <video>) на холст, помещая верхний левый угол изображения в точку (dx, dy). Если указаны аргументы dw и dh, изображение будет масштабировано так, чтобы оно уместилось в область шириной dw пикселов и высотой dh пикселов.