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

  void drawImage(Element image, double sx, sy, sw, sh, dx, dy, dw, dh)

Эта версия метода drawImage копирует прямоугольную область изображения image в заданную область холста. Значением аргумента image должен быть элемент <img>, <canvas> или <video>. Координаты точки (sx,sy) определяют верхний левый угол прямоугольной области в исходном изображении, а аргументы sw и sh - ширину и высоту этой области. Обратите внимание, что значения аргументов измеряются в CSS-пикселах и на них не влияют действующие преобразования системы координат. Остальные аргументы определяют прямоугольную область холста, куда должно быть скопировано изображение: подробности приводятся в описании версии метода drawImage с пятью аргументами выше. Обратите внимание, что аргументы, определяющие прямоугольную область холста, преобразуются в соответствии с текущей матрицей преобразований.

  void fill

Метод fill выполняет заливку текущего контура цветом, градиентом или шаблоном, заданным свойством fillStyle. Любой незамкнутый подконтур заполняется так, как если бы для него неявно был вызван метод closePath. (Обратите внимание: это не означает, что вызов этого метода сделает подконтур замкнутым.) Операция заливки текущего контура не очищает его. Можно сразу вслед за методом fill вызвать метод stroke без повторного определения пути.

Когда контур пересекает сам себя или состоит из нескольких накладывающихся друг на друга подконтуров, метод fill пользуется правилом ненулевого числа оборотов для определения, какие точки находятся внутри, а какие вне контура. Это означает, например, что если контур определяет квадрат внутри окружности и подконтур квадрата нарисован в направлении, противоположном направлению рисования окружности, то область внутри квадрата будет считаться лежащей вне контура и не будет заполняться.

  void fillRect(double х, у, width, height)

Метод fillRect выполняет заливку заданного прямоугольника цветом, градиентом или шаблоном, который задается свойством fillStyle.

В отличие от метода rect, метод fillRect не влияет на текущую позицию пера и текущий контур.

  void fillText(string text, double x, у, [double maxWidth])

Метод fillText рисует текст text, используя текущие значения свойств font и fillStyle. Аргументы х и у определяют координаты, где должен выводиться текст, но интерпретация этих аргументов зависит от свойств textAlign и textBaseline, соответственно.

Если свойство textAlign имеет значение «left» или «start» (по умолчанию), в случае использования направления для письма слева направо (также по умолчанию), или «end» в случае использования письма справа налево, текст выводится правее указанной координаты X. Если свойство textAlign имеет значение «center», текст центрируется по горизонтали относительно указанной координаты X. В противном случае (если textAlign имеет значение «right», «end» для письма слева направо или «start» для письма справа налево) текст выводится левее указанной координаты X. Если свойство textBaseline имеет значение «alphabetic» (по умолчанию), «bottom» или «ideographic», большинство символов будут нарисованы выше указанной координаты Y. Если свойство textBaseline имеет значение «center», текст будет центрироваться по вертикали относительно указанной координаты Y. А если свойство textBaseline имеет значение «top» или «hanging», большинство символов будут нарисованы ниже указанной координаты Y.

Необязательный аргумент maxWidth определяет максимальную ширину текста. Если текст в аргументе text окажется шире, чем определено аргументом maxWidth, он будет нарисован более мелким или более узким шрифтом.

  ImageData getImageData(double sx, sy, siv, sh)

Аргументы этого метода определяют непреобразованные координаты прямоугольной области холста. Метод копирует пикселы из этой области холста в новый объект ImageData и возвращает этот объект. Как получить доступ к составляющим цвета и альфа-компонентам отдельных пикселов, описывается в справочной статье ImageData.

Компоненты RGB цвета возвращаемых пикселов не учитывают значение альфа-компонента. Если какая-либо часть запрошенной области оказывается за границами холста, соответствующие пикселы в объекте ImageData устанавливаются в черный прозрачный цвет (все компоненты цвета равны нулю). Если для представления одного CSS-пиксела реализация использует несколько аппаратных пикселов, значения свойств width и height возвращаемого объекта ImageData будут отличаться от значений аргументов sw и sh.

Подобно методу Canvas.toDataURL, этот метод препятствует утечке информации между доменами. Метод getlmageData возвращает объект ImageData, только если изображение в холсте имеет общее происхождение с документом; в противном случае он возбуждает исключение. Считается, что холст не имеет общего происхождения с документом, если в нем содержалось изображение (созданное непосредственно с помощью метода drawlmage или косвенно, с помощью объекта CanvasPattern), имеющее иное происхождение, отличное от происхождения содержащего его документа. Кроме того, считается, что элемент <canvas> имеет неясное происхождение, если в нем рисовался текст с использованием веб-шрифтов, имеющих иное происхождение.

  boolean isPointInPath(double х, у)

Метод isPointlnPath возвращает true, если указанная точка попадает в пределы текущего контура; в противном случае он возвращает false. Указанные координаты интерпретируются в системе координат, не преобразованной с применением текущей матрицы преобразования. Аргумент х должен иметь значение между 0 и canvas.width, а аргумент у - между 0 и canvas.height.

Причина, почему isPointlnPath использует непреобразованные координаты, состоит в том, что он предназначен для «проверки попадания»: определения попадания указателя мыши во время щелчка (например) в область холста, ограниченную контуром. Чтобы выполнить проверку попадания, координаты указателя мыши сначала должны быть преобразованы из координат окна в координаты холста. Если экранные размеры холста отличаются от размеров, определяемых атрибутами width и height (например, в случае установки атрибутов style.width и style.height), координаты указателя мыши также необходимо привести к масштабу, соответствующему масштабу системы координат холста. Ниже демонстрируется функция, которая может использоваться как обработчик onclick элемента <canvas> и выполнять необходимые преобразования координат указателя мыши в координаты холста:

  // Обработчик onclick для тега <canvas>. Предполагается, что текущий контур определен.
  function hittest(event) {
   var canvas = this; // Вызывается в контексте холста
   var с = canvas.getContext("2d"); // Получить контекст рисования для холста
   // Получить размеры и координаты холста var bb = canvas.getBoundingClientRect;