с девятью аргументами ему передаются координаты и размеры области в исходном изображении и области в холсте, и он скопирует только указанную область исходного изображения. В аргументах со второго по пятый указываются координаты и размеры прямоугольной области в исходном изображении. Они измеряются в пикселах 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); // Увеличить ее, чтобы были видны отдельные пикселы
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.
А затем, когда придет время восстановить холст, можно скопировать обратно в него фрагмент, который был сохранен в неотображаемом холсте. Напомню, что скопированные пикселы были полупрозрачными. Если режим композиции будет действовать, они не затрут полностью временные изменения. В подобных ситуациях необходимо иметь способ отключать композицию: чтобы вставлять исходные пикселы, игнорируя целевые, независимо от степени прозрачности исходных.
Установить тип композиции можно с помощью свойства
globalCompositeOperation
. По умолчанию оно имеет значение «source-over», в соответствии с которым исходные пикселы накладываются «поверх» («over») целевых пикселов и объединяются с ними, если исходные пикселы являются полупрозрачными. Если присвоить этому свойству значение «сору», композиция будет отключена: исходные пикселы будут скопированы в холст без изменений и затрут целевые пикселы. Иногда может оказаться полезным еще одно значение свойства
globalCompositeOperation
– «destination-over». При использовании этого вида композиции пикселы объединяются так, как будто исходные пикселы добавляются под существующие целевые пикселы. Если целевые пикселы будут иметь прозрачный или полупрозрачный цвет, некоторые или все исходные пикселы будут видны сквозь этот цвет.
«source-over», «destination-over» и «сору» - это три наиболее часто используемых вида композиции, однако прикладной интерфейс объекта
Canvas
поддерживает 11 значений для атрибута
globalCompositeOperation
. Названия этих видов композиции достаточно красноречиво объясняют, что они призваны делать, и вам может потребоваться немало времени, чтобы разобраться в особенностях разных видов композиции, подставляя их названия в примеры, демонстрирующие их действие.