Canvas globalCompositeOperation

По умолчанию, если объект (источник) нарисован поверх другого объекта (цели) в Canvas, браузер просто наложит изображение исходного объекта поверх изображения целевого объекта.

Проще говоря, в Canvas, объединив исходное изображение и целевое изображение с помощью операции globalCompositeOperation в Canvas, вы можете получить различные эффекты, такие как следующий рисунок:

Как показано на рисунке выше, красное яблоко и черный круг превращаются в надкушенное красное яблоко через destination-out globalCompositeOperation . Другими словами, посредством синтеза изображений в Canvas мы можем добиться некоторых уникальных эффектов, например, создать эффект лотереи скретч-карт. Сегодня мы научимся использовать синтез изображений в Canvas.

Всего в Canvas имеется 26 типов значений атрибута globalCompositeOperation . Каждый тип будет создавать разные эффекты. Конечно, вы можете заметить, что эффекты будут разными, и некоторые эффекты могут не отображаться нормально в браузере. Но это не имеет значения, давайте просто разберемся в значениях и эффектах этих 26 типов.

 ctx.save(); ctx.translate(w/2, h/2); ctx.fillStyle = 'красный'; ctx.beginPath(); ctx.arc(-40, 20, 80, 0, Math.PI * 2, правда); ctx.closePath(); ctx.fill();

Приведенный выше код нарисует красный круг радиусом 80px на холсте Canvas, который здесь называется источником изображения.

 ctx.fillStyle = 'оранжевый'; ctx.beginPath(); ctx.arc(40, 20, 80, 0, Math.PI * 2, true); ctx.fill(); ();

Этот код нарисует оранжевый круг радиусом 80px на холсте Canvas, который здесь называется целью изображения. Установив значение globalCompositeOperation между источником изображения и целевым изображением, можно завершить операцию синтеза изображения:

 ctx.save(); ctx.translate(w/2, h/2); ctx.fillStyle = 'красный'; ctx.beginPath(); ctx.arc(-40, 20, 80, 0, Math.PI * 2, правда); ctx.closePath(); ctx.fill(); ctx.globalCompositeOperation = 'source-in'; ctx.fillStyle = 'orange'; ctx.beginPath(); ctx.arc(40, 20, 80, 0, Math.PI * 2, true); ctx.closePath(); (); ctx.восстановить();

Эффект, полученный на данный момент, следующий:

source-over — это значение по умолчанию свойства globalCompositeOperation . Исходное изображение закрывает целевое изображение. Исходное изображение отображается в непрозрачных частях исходного изображения, а целевое изображение отображается в остальных.

source-in : рисуются только те части целевого изображения и исходного изображения, которые перекрываются и являются непрозрачными.

source-out : будет нарисована непересекающаяся часть целевого изображения и исходного изображения.

source-atop : будет отрисована целевая графика в перекрывающейся части содержимого целевой графики и исходной графики.

destination-over : будет нарисована конечная графика позади целевой графики и исходного графического содержимого.

destination-in : перекрывающаяся часть конечного изображения и исходного изображения будет сохранена (исходное изображение), а остальная часть будет отображаться прозрачно.

Остальные не будут отображаться по одному. Конкретное описание, соответствующее каждому значению, можно найти здесь.

В Canvas есть два свойства globalAlpha и globalCompositeOperation для управления операциями синтеза изображений:

• globalAlpha : установите прозрачность изображения. Свойство globalAlpha по умолчанию имеет значение 1 , что указывает на полную непрозрачность, и может быть установлено от 0 (полностью прозрачно) до 1 (полностью непрозрачно). Это значение должно быть установлено до построения графика.
• globalCompositeOperation : значение этого атрибута управляет отрисовкой графики в текущем растровом изображении Canvas после того, как globalAlpha и все преобразования вступили в силу.

В нашей повседневной работе мы часто видим эффекты лотереи, такие как скретч-карты. Если мы используем для этого Canvas, мы будем использовать синтез изображений Canvas.

 <div id=card> <canvas id=canvasOne width=500 height=300></canvas> </div>

Мы отображаем приз (если это изображение) в качестве фона div#card . Затем сначала нарисуйте серый прямоугольник (исходное изображение) в Canvas, затем динамически нарисуйте новое изображение с помощью событий мыши (или событий касания) (это похоже на кисть) и установите значение атрибута globalCompositeOperation на destination-out (новое draw Непересекающиеся части графики и графическое содержимое, уже существующее на целевом холсте, будут сохранены). Если стирание кисти превышает определенную пропорцию, удалите элемент <canvas> или используйте clearRect() , чтобы очистить холст Canvas. чтобы показать фон div

В этой статье мы в основном знакомим с синтезом изображений Canvas. В Canvas операцией синтеза изображений можно управлять с помощью двух атрибутов, globalAlpha и globalCompositeOperation, для достижения эффекта синтеза изображений. Я надеюсь, что это будет полезно для обучения каждого, а также надеюсь, что все поддержат сеть VeVb Wulin.