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

   // Преобразовать координаты указателя мыши в координаты холста
   var х = (event.clientX-bb.left)*(canvas.width/bb.width);
   var у = (event.clientY-bb.top)*(canvas.height/bb.height);
   // Залить контур, если пользователь щелкнул в его пределах
   if (с.isPointInPath(x,у)) с.fill;
  }

  void lineTo(double x, double y)

Метод lineTo добавляет прямую линию в текущий подконтур. Линия начинается в текущей позиции пера и заканчивается в точке с координатами (х,у). Когда этот метод возвращает управление, текущая позиция перемещается в точку (х,у).

  TextMetrics measureText(string text)

Метод measureText вычисляет ширину текста text, которую он займет при рисовании с текущим значением свойства font, и возвращает объект TextMetrics, содержащий результаты вычислений. На момент написания этих строк возвращаемый объект имел только одно свойство, width, а высота текста и параметры описывающего прямоугольника не вычислялись.

  void moveTo(double х, double у)

Метод moveTo переносит текущую позицию пера в точку (х,у) и создает новый подконтур с начальной точкой в этой точке. Если перед этим существовал подконтур, состоящий из единственной точки, этот пустой подконтур удаляется из текущего контура.

  void putImageData(ImageData imagedata, double dxt dy, [sx, sy, sw, sh])

Метод putImageData копирует прямоугольную область из объекта ImageData в холст. Он выполняет низкоуровневую операцию копирования пикселов, игнорируя значения свойств globalCompositeOperation и globalAlpha, а также область отсечки, матрицу преобразования и атрибуты, управляющие отображением тени.

Аргументы dx и dy определяют координаты назначения в холсте. Пикселы из объекта в аргументе imagedata будут копироваться в холст, начиная с этой точки. Значения этих аргументов не подвергаются преобразованию с применением текущей матрицы преобразования.

Последние четыре аргумента определяют исходную прямоугольную область в объекте ImageData. Скопированы будут только пикселы из указанной прямоугольной области. Если эти аргументы отсутствуют, объект ImageData будет скопирован целиком. Если эти аргументы определяют прямоугольник, выходящий за границы объекта ImageData, прямоугольник будет обрезан по этим границам. В аргументах sx и sy допускается передавать отрицательные значения.

Одна из ролей объектов ImageData– служить «временным хранилищем» для содержимого холста. Сохранение копии холста (с использованием метода getImageData) позволяет временно наносить на холст изображения и затем восстанавливать прежнее состояние холста с помощью putlmageData.

  void quadraticCurveTo(double срх, еру, х, у)

Данный метод добавляет кривую Безье второго порядка в текущий подконтур. Начальная точка кривой находится в текущей позиции, а координаты конечной точки определяются аргументами х и у. Форма кривой Безье, соединяющей эти две точки, определяется контрольной точкой (срХ, cpY). По возвращении из метода текущей позицией становится точка (х,у). Обратите также внимание на метод bezierCurveTo.

  void rect(double х, у, tv, h)

Добавляет в контур прямоугольник. Прямоугольник представляет собой отдельный подконтур, который никак не связан ни с одним из имеющихся подконтуров. По возвращении из метода текущей позицией становится точка (х,у). Вызов этого метода эквивалентен следующей последовательности вызовов:

  с.moveTo(x,у);
  с.lineTo(x+w, у);
  с.lineTo(x+w, y+h);
  c.lineTo(x, y+h);
  c.closePath;

  void restore

Метод снимает с вершины стека значения параметров холста и записывает их в свойства объекта CanvasRenderingContext2D, восстанавливая область отсечки и матрицу преобразования. Дополнительные сведения см. в справочной статье save.void

  rotate(double angle)

Данный метод изменяет текущую матрицу преобразования таким образом, что любые фигуры, нарисованные после вызова этого метода, выглядят повернутыми на указанный угол. Этот метод не выполняет вращение самого элемента <canvas>. Обратите внимание: угол задается в радианах. Чтобы преобразовать градусы в радианы, нужно умножить величину угла на константу Math. PI и разделить на число 180.

  void save

Метод save помещает копию текущих параметров холста на вершину стека сохраняемых параметров. Это позволяет внести временные изменения в какие-либо параметры и затем восстановить предыдущие значения вызовом метода restore. В перечень сохраняемых параметров входят все свойства объекта CanvasRenderingContext2D (за исключением доступного только для чтения свойства canvas), а также матрица преобразования, которая является результатом вызова методов rotate, scale и translate. Кроме того, в стеке сохраняется область отсечки, созданная методом clip. Однако следует заметить, что текущие контур и позиция пера не входят в данный перечень и этим методом не сохраняются,

  void scale(double sx, double sy)

Метод scale добавляет преобразование масштаба в текущую матрицу преобразования холста. Масштабирование выполняется отдельно по горизонтали и по вертикали. Например, если передать методу значения 2.0 и 0.5, все последующие фигуры будут иметь в два раза большую ширину и в два раза меньшую высоту по сравнению с тем, как они выглядели бы, если бы они были нарисованы до вызова метода scale. Отрицательные значения аргумента sx вызывают зеркальное отражение координат относительно оси Y, а отрицательные значения аргумента sy вызывают зеркальное отражение координат относительно оси X.

  void setTransform(double a, b, с, d, е, f)

Этот метод позволяет напрямую установить матрицу преобразования, не выполняя последовательность вызовов методов translate, scale и rotate. После вызова этого метода новое преобразование будет иметь вид:

  х' а с е х = ах+су+е
  y' = b d f x y = bx+dy+f
  1 0 0 1 1