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

При вызове с тремя аргументами во втором и третьем аргументах методу

drawImage()

передаются координаты X и Y верхнего левого угла области, в которую должно быть скопировано изображение. В этом случае в холст будет скопировано изображение целиком. Координаты X и Y будут интерпретироваться как координаты в текущей системе координат, поэтому при необходимости изображение будет масштабировано или повернуто.

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

drawImage()

с пятью аргументами к аргументам с координатами X и Y, описанным выше, добавляются ширина и высота. Эти четыре аргумента определяют прямоугольную область внутри холста. Верхний левый угол исходного изображения будет помещен в точку (х.у), а правый нижний - в точку (x+width, y+height). Опять же в холст будет скопировано изображение целиком. Прямоугольная область назначения определяется в текущей системе координат. Эта версия метода выполнит масштабирование изображение, чтобы уместить его в отведенную область, даже если к исходной системе координат не применялось преобразование масштабирования.

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

drawImage()

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

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

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

Пример 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. Композиция

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

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

drawImage().

А затем, когда придет время восстановить холст, можно скопировать обратно в него фрагмент, который был сохранен в неотображаемом холсте. Напомню, что скопированные пикселы были полупрозрачными. Если режим композиции будет действовать, они не затрут полностью временные изменения. В подобных ситуациях необходимо иметь способ отключать композицию: чтобы вставлять исходные пикселы, игнорируя целевые, независимо от степени прозрачности исходных.