HTML холст globalCompositeOperation Свойство
Пример
Рисование прямоугольников с использованием двух различных значений globalCompositeOperation. Красными прямоугольниками являются целевые изображения. Синие прямоугольники являются исходными изображениями:
source-over
destination-over
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
ctx.globalCompositeOperation="source-over";
ctx.fillStyle="blue";
ctx.fillRect(50,50,75,50);
ctx.fillStyle="red";
ctx.fillRect(150,20,75,50);
ctx.globalCompositeOperation="destination-over";
ctx.fillStyle="blue";
ctx.fillRect(180,50,75,50);
Поддержка браузера
Internet Explorer 9, Firefox, Opera, Chrome и Safari поддерживают свойство globalCompositeOperation.
Примечание: Internet Explorer 8 и более ранние версии не поддерживают элемент <Canvas>.
Определение и использование
Свойство globalCompositeOperation задает или возвращает способ рисования исходного (нового) изображения на целевое (существующее) изображение.
исходное изображение = чертежи, которые вы собираетесь разместить на холсте.
целевое изображение = чертежи, которые уже размещены на холсте.
| Значение по умолчанию: | source-over |
|---|---|
| Синтаксис JavaScript: | context.globalCompositeOperation="source-in"; |
Пример
Все значения свойств globalCompositeOperation:
❮ HTML Справка на полотно