javascript - 不影响前面层的 HTML Canvas globalCompositeOperation

Question

我有这 4 个层。

我想做的是将 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()

还有 fiddle https://jsfiddle.net/ws3b4q95/4/

Answer 1

Canvas 不知道形状是对象，它只关心像素。所以紫色矩形不能从您的蒙版中排除，因为 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