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

Флэнаган Дэвид
Шрифт:

При вызове метода

drawImage
с девятью аргументами ему передаются координаты и размеры области в исходном изображении и области в холсте, и он скопирует только указанную область исходного изображения. В аргументах со второго по пятый указываются координаты и размеры прямоугольной области в исходном изображении. Они измеряются в пикселах CSS. Если исходное изображение представлено другим элементом <canvas>, координаты и размеры исходного изображения будут измеряться в системе координат по умолчанию и никакие преобразования, применявшиеся к системе координат исходного холста, учитываться не будут. В аргументах с шестого по девятый указываются координаты и размеры области в текущей (а не по умолчанию) системе координат, куда будет скопирован указанный фрагмент изображения.

Пример 21.9 демонстрирует простой случай применения метода drawImage. В нем используется версия метода с девятью аргументами, чтобы скопировать фрагмент холста, увеличенный и повернутый, обратно в тот же самый холст. Как видно на рис. 21.15, изображение было увеличено достаточно, чтобы проявилась его растровая структура и можно было наблюдать полупрозрачные пикселы, которые использованы для сглаживания краев линии.

Пример 21.9, Использование метода drawlmagef)

// Нарисовать линию в верхнем левом углу

с.moveTo(5,5);

с. ПпеТо(45,45);

с.lineWidth = 8;

с.lineCap = "round";

с.stroke;

// Определить преобразование системы координат

с.translate(50,100);

с. rotate(-45*Math.PI/180); // Разгладить линию

с. scale(10,10); // Увеличить ее, чтобы были видны отдельные пикселы

// С помощью drawlmage скопировать линию

с.drawlmage(c.canvas,

0, 0, 50, 50, // исходная область: непреобразованная

0, 0, 50, 50); // область назначения: преобразованная

Помимо возможности копировать изображение в холст, имеется также возможность извлекать содержимое холста в виде изображения с помощью метода

toDataURL.
В отличие от других методов, описанных выше, метод
toDataURL
– это метод самого элемента
Canvas
, а не объекта
CanvasRenderingContext2D
. Обычно метод
toDataURL
вызывается без аргументов и возвращает содержимое холста как PNG-изображение, закодированное в виде строки в формате URL
data:.
Возвращаемая строка URL подходит для использования в элементе
<img>,
благодаря чему можно создать статический снимок холста, как показано ниже:

var img = document.сreateElement("img”); // Создать элемент <img>

img.src = canvas.toDataURL; // Установить его атрибут src

document.body.appendChild(img); // Добавить элемент в документ

Все броузеры в обязательном порядке поддерживают формат PNG изображений. Некоторые реализации могут также поддерживать другие форматы, и вы можете указать желаемый MIME-тип в необязательном первом аргументе в вызове метода

toDataURL.
Подробности смотрите в справочном разделе книги.

Существует одно важное ограничение, связанное с безопасностью, о котором следует знать, планируя применять метод

toDataURL.
Чтобы предотвратить утечку информации между доменами, метод
toDataURL
не работает с элементами
<canvas>,
имеющими «неясное происхождение». Считается, что холст имеет неясное происхождение, если в него вставлялось изображение (непосредственно, вызовом метода
drawImage,
или косвенно, с помощью метода
CanvasPattern
), имеющее происхождение, отличное от происхождения документа, содержащего элемент
<canvas>
.

21.4.13. Композиция

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