HTML Canvas globalCompositeOperation，不会影响以前的图层

Question

我有这4个layers。

我尝试做的是将red和blue图层放入一个mask。但我不希望此purple或orange图层受此屏蔽影响（仅限red和blue）。我设法让它适用于orange但不适用于purple图层

查看我的代码

var canvas = document.querySelector('canvas');
canvas.height = window.innerHeight
canvas.width = window.innerWidth
var ctx = canvas.getContext('2d');


//this should'nt be affected by the mask
ctx.beginPath()
ctx.fillStyle = 'purple';
ctx.rect(0, 50, 100, 100);
ctx.fill()

//this is the mask
ctx.beginPath()
ctx.rect(10, 10, 70, 70);
ctx.fillStyle = 'green';
ctx.fill()

ctx.globalCompositeOperation = 'source-atop';

//this need to be inside the mask
ctx.beginPath()
ctx.fillStyle = 'blue';
ctx.rect(10, 10, 100, 100);
ctx.fill()

//this need to be inside the mask
ctx.beginPath()
ctx.fillStyle = 'red';
ctx.rect(50, 40, 100, 100);
ctx.fill()


ctx.globalCompositeOperation = 'source-over'; //reset

//this should'nt be affected by the mask
ctx.beginPath()
ctx.fillStyle = 'orange';
ctx.rect(200, 40, 100, 100);
ctx.fill()

小提琴https://jsfiddle.net/ws3b4q95/4/

Answer 1

Canvas并不了解形状作为对象，它只关心像素。因此紫色矩形不能从你的面具中排除，因为已经在画布上绘制的每一个都将成为面具的一部分。

相反，您应该在应用遮罩后绘制矩形，并使用destination-over操作：

//this need to be inside the mask
ctx.beginPath()
ctx.fillStyle = 'red';
ctx.rect(50, 40, 100, 100);
ctx.fill()

//this should'nt be affected by the mask
ctx.globalCompositeOperation = 'destination-over';
ctx.beginPath()
ctx.fillStyle = 'purple';
ctx.rect(0, 40, 100, 100);
ctx.fill()

这是Mozilla关于复合操作的一个很好的总结：MDN web docs: CanvasRenderingContext2D.global .CompositeOperation