Canvas globalCompositeOperation源输入和目标输入不能与多个源和目标一起使用

基础概念

globalCompositeOperation 是 HTML5 Canvas API 中的一个属性，用于设置图形合成的模式。这个属性决定了新绘制的图形如何与已经存在的图形进行混合。源输入（source）是指新绘制的图形，目标输入（destination）是指 Canvas 上已经存在的图形。

类型

Canvas 提供了多种合成操作类型，包括但不限于：

• source-over（默认）：新图形覆盖在旧图形之上。
• destination-over：新图形绘制在旧图形下方。
• source-in：仅显示新图形与旧图形重叠的部分。
• destination-in：仅显示旧图形与新图形重叠的部分。
• source-out：仅显示新图形未与旧图形重叠的部分。
• destination-out：仅显示旧图形未与新图形重叠的部分。
• lighter：新图形与旧图形颜色值相加，产生更亮的效果。
• darker：新图形与旧图形颜色值相减，产生更暗的效果。
• xor：新图形与旧图形进行异或操作。

应用场景

合成操作在图形设计、动画制作、游戏开发等领域有广泛应用。例如，在制作粒子效果、光影效果、图像处理等场景中，可以通过调整 globalCompositeOperation 来实现不同的视觉效果。

问题与解决

你提到的问题是“Canvas globalCompositeOperation源输入和目标输入不能与多个源和目标一起使用”。这是因为 globalCompositeOperation 属性设置的是全局的合成模式，它作用于整个 Canvas 上的所有图形，而不是单独的源和目标。

如果你需要对特定的源和目标进行不同的合成操作，你需要分步骤进行绘制，并在每一步中设置相应的 globalCompositeOperation。例如：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 绘制第一个图形
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 100);

// 设置合成模式
ctx.globalCompositeOperation = 'source-over';

// 绘制第二个图形
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);

// 改变合成模式
ctx.globalCompositeOperation = 'destination-over';

// 绘制第三个图形
ctx.fillStyle = 'green';
ctx.fillRect(90, 90, 100, 100);

在这个例子中，我们首先绘制了一个红色矩形，然后设置合成模式为 source-over 并绘制了一个蓝色矩形，最后改变合成模式为 destination-over 并绘制了一个绿色矩形。

参考链接

• MDN Web Docs: CanvasRenderingContext2D.globalCompositeOperation

通过这种方式，你可以控制不同图形之间的合成效果，实现复杂的视觉效果。