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

Флэнаган Дэвид

Подобно методу

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 dx_t 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);