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

CanvasRenderingContext2D

CanvasRenderingContext2D

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

Объект CanvasRenderingContext2D предоставляет набор свойств и методов для рисования двухмерных графических изображений. Следующие разделы содержат краткий обзор его возможностей. Дополнительная информация приводится в разделе 21.4, а также в справочных статьях Canvas, CanvasGradient, CanvasPattern, ImageData и TextMetrics.

Создание и отображение контуров

Очень мощная особенность элемента Canvas заключается в возможности строить фигуры с помощью элементарных операций рисования и затем отображать их либо в виде ограничивающих фигуру линий, либо заполнять их. Собранные воедино операции рисования называются текущим контуром. Элемент Canvas поддерживает возможность работы лишь с одним текущим контуром.

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

Существует возможность создать в текущем контуре несколько несвязанных фигур, которые должны отображаться с одними и теми же параметрами рисования. Для отделения фигур используется метод moveTo(); он перемещает текущую позицию в новые координаты без добавления линии, связывающей точки. Когда вызывается этот метод, создается новый вложенный контур, или подконтур, который в терминах элемента Canvas используется для объединения связанных операций.

Из доступных операций рисования можно упомянуть: lineТо() - рисование отрезков прямых линий, rect() - рисование прямоугольников, агс() и arcTo() - рисование дуг, bezierCurveTo() и quadraticCurveTo() - рисование кривых.

Как только требуемый контур сформирован, нарисовать фигуру в виде ограничивающих линий можно методом stroke(), а залить внутреннюю область фигуры - методом fill(); можно также вызвать оба метода.

Помимо рисования линий и заливки фигур текущий контур можно использовать как область отсечки. Пикселы в пределах этой области будут отображаться, за ее пределами - нет. Область отсечки обладает свойством накапливать изменения - вызов метода clip() для создания области отсечки, пересекающейся с текущей, приводит к созданию новой объединенной области.

Если сегменты в любом из вложенных контуров не формируют замкнутую фигуру, операции fill() и clip() неявно замыкают их, добавляя виртуальный (невидимый) отрезок прямой линии, соединяющий начальную и конечную точки контура. Чтобы явно добавить такой сегмент и тем самым замкнуть фигуру, следует вызвать метод closePath(). Чтобы проверить, находится ли точка внутри (или на границе) текущего контура, можно использовать метод isPointInPath(). Когда контур пересекает сам себя или состоит из нескольких накладывающихся друг на друга подконтуров, понятие «внутри» определяется правилом сохранения знака. Если нарисовать одну окружность внутри другой и обе рисовать в одном и том же направлении, все, что находится внутри большей окружности, будет считаться внутренней областью контура. Если, напротив, одну окружность нарисовать по часовой стрелке, а другую - против часовой стрелки, получится кольцо, и внутренняя область меньшей окружности будет считаться за пределами контура. Это же определение внутренней области используется методами fill() и сlір().

Цвета, градиенты и шаблоны

При заполнении или рисовании границ фигуры существует возможность указать, каким образом должны заполняться линии или ограниченная ими область, для чего используются свойства fillStyle и strokeStyle. Оба эти свойства могут принимать строку со значением цвета в формате CSS, а также объект CanvasGradient или CanvasPattern, который описывает градиент или шаблон. Для создания градиента используется метод createLinearGradient() или createRadialGradient(), для создания шаблона - метод createPattern().

Непрозрачный цвет в нотации CSS задается строкой в формате #RRGGBB, где RR, GG и BB - это шестнадцатиричные цифры, определяющие интенсивность красной (red), зеленой (green) и синей (blue) составляющих в диапазоне от 00 до FF. Например ярко-красный цвет описывается строкой «#FF0000». Чтобы определить степень прозрачности цвета, используется строка в формате «rgba(R, G, В, А)». В такой нотации R, G и В определяют интенсивность красной, зеленой и синей составляющих цвета в виде десятичных чисел в диапазоне от 0 до 255, а А - альфа-компонент (прозрачность), как число с плавающей точкой в диапазоне от 0.0 (полностью прозрачный цвет) до 1.0 (полностью непрозрачный цвет). Например, полупрозрачный ярко-красный цвет описывается строкой «rgba(255, 0, 0, 0.5)».

Толщина, окончания и сопряжение линий

Элемент Canvas имеет несколько свойств, с помощью которых можно определить различные варианты отображения линий. Толщину линий можно указать с помощью свойства lineWidth, окончания линий - с помощью свойства liпеСар, сопряжения линий - с помощью свойства lineJoin.

Рисование прямоугольников

Нарисовать и заполнить прямоугольник можно с помощью методов strokeRect() и fillRect(). Кроме того, методом clearRect() можно очистить прямоугольную область.

Рисование изображений

В API объекта Canvas изображения определяются с помощью объектов Image, которые представляют HTML-теги <img> или невидимые изображения, созданные с помощью конструктора Image() (дополнительную информацию см. в справочной статье Image). Кроме того, в качестве объекта-источника изображения могут использоваться элементы <canvas> и <video>.

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

Рисование текста

Метод fillText() рисует текст, а метод strokeText() рисует контуры букв, составляющих текст. Используемый шрифт определяется свойством font; значение этого свойства должно быть строкой определения шрифта в формате CSS. Выравнивание текста относительно указанной координаты X по левому краю, по правому краю или по центру определяется с помощью свойства textAlign, а выравнивание относительно указанной координаты Y - с помощью свойства textBaseline.

Система координат и преобразования

По умолчанию начало системы координат холста находится в точке (0,0), в верхнем левом углу, когда координата X растет в направлении к правой границе, а координата Y - к нижней. Атрибуты width и height тега <canvas> определяют максимальные значения координат X и Y, а одна элементарная единица измерения в системе координат обычно соответствует одному пикселу.

Однако существует возможность преобразовать систему координат, вызывая смещение, масштабирование или вращение системы координат в операциях рисования. Делается это с помощью методов translate(), scale() и rotate(), которые оказывают влияние на матрицу преобразования холста. Поскольку система координат может подвергаться подобным преобразованиям, значения координат, которые передаются методам, таким как lineTo(), могут не соответствовать количеству пикселов. По этой причине для определения координат в API объекта Canvas используются не целые, а вещественные числа.

Тени

Объект CanvasRenderingContext2D может автоматически добавлять тени к любым создаваемым фигурам. Цвет тени задается с помощью свойства shadowColor, а ее смещение-с помощью свойств shadowOffsetX и shadowOffsetY. Кроме того, с помощью свойства shadowBlur можно определить степень размытия краев тени.

Композиция

Обычно при рисовании на холсте новые фигуры накладываются поверх ранее нарисованных, частично или полностью скрывая их, в зависимости от степени прозрачности новых фигур. Процесс объединения новых пикселов со старыми называется «композицией», и, указывая различные значения в свойстве globalCompositeOperation, можно управлять порядком объединения пикселов. Например, это свойство можно установить так, что новые фигуры будут рисоваться под существующими.

В следующей таблице перечислены допустимые значения свойства и их смысл. Под исходными в таблице подразумеваются пикселы, которые рисуются в настоящий момент, под целевыми - существующие пикселы. Под результирующими - пикселы, которые получаются в результате объединения исходных и целевых пикселов. В формулах символом S обозначается исходный (source) пиксел, символом D - целевой (destination) пиксел, символом R - результирующий (result) пиксел, символом as - альфа-компонент (уровень непрозрачности) исходного пиксела, и символом a_d - альфа-компонент целевого пиксела:

Сохранение значений графических параметров

Методы save() и restore() позволяют сохранять и восстанавливать параметры объекта CanvasRenderingContext2D. Метод save() помещает параметры на вершину стека, а метод restore() снимает последние сохраненные параметры с вершины стека и делает их текущими.

Сохраняются все свойства объекта CanvasRenderingContext2D (за исключением свойства canvas, которое является константой). Матрица преобразования и область отсечки также сохраняются на стеке, но текущий контур и позиция пера не сохраняются.

Манипулирование пикселами

Метод getlmageData() позволяет получить массив пикселов холста, а метод putlmageData() дает возможность устанавливать отдельные пикселы. Эти методы могут пригодиться, если потребуется реализовать обработку изображений на языке JavaScript.

Свойства

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

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 пикселов.

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();
  // Преобразовать координаты указателя мыши в координаты холста
  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
void stroke()

Метод stroke() выполняет рисование линий, составляющих текущий контур. Контур определяет лишь геометрию линии, которая должна быть воспроизведена, а визуальное ее представление зависит от значений свойств strokeStyle, lineWidth, lineCap, lineJoin и miterLimit.

Под термином stroke (чертить) понимается вычерчивание линий пером или кистью. Это означает «нарисовать контур». В противовес методу stroke(), метод fill() выполняет заливку внутренней области без рисования ее контура,

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

Рисует контур (не выполняя заливку внутренней области) прямоугольника с заданными координатами и размерами. Цвет и толщина линий определяются значениями свойств strokeStyle и lineWidth. Стиль оформления сопряжений в углах прямоугольника определяется значением свойства lineJoin.

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

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

Метод strokeText() действует подобно методу fillText(), за исключением того, что он не выполняет заливку отдельных символов в соответствии со значением свойства fillStyle, а рисует только контуры каждого символа, учитывая значение свойства strokeStyle. Для шрифтов большого размера метод strokeText() обеспечивает интересный графический эффект, но на практике для рисования текста чаще используется метод fillText().
void transform(double a, b, с, d, е, f)

Аргументы этого метода определяют шесть нетривиальных элементов матрицы Т аффинного преобразования размером 3x3:

а с е
b d f
0 0 1

Метод transform() умножает текущую матрицу преобразования на матрицу Т и принимает результат в качестве текущей матрицы преобразования:

СТМ' = СТМ X T

В терминах универсального метода transform() можно реализовать операции смещения, масштабирования и вращения. Чтобы выполнить смещение, можно произвести вызов transform(1,0,0,1,dx,dy). Чтобы выполнить масштабирование - transform(sx, 0, 0, sy, 0, 0). Для выполнения вращения по часовой стрелке на угол х:

transform(cos(x),sin(x),-sin(x), cos(x), 0, 0)

Чтобы выполнить сдвиг параллельно оси X на множитель к, можно произвести вызов transform(1,0,k,1,0,0). Сдвига параллельно оси Y можно добиться вызовом transform(1, k, 0,1,0,0).

void translate(double х, double у)

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

Оглавление книги