Answer 1

您注意到此问题的原因是浏览器不能正确选择您选择的模式。有关globalCompositeOperation的浏览器之间存在一些问题。目前，只有少数几种模式适用于浏览器（Chrome / Safari / Opera / Firefox），没有怪癖：

• 源悬停
• 源顶上
• 目的地超过
• 目的地出
• 打火机
• XOR

要了解更多信息，请查看以下链接;

http://www.rekim.com/2011/02/11/html5-canvas-globalcompositeoperation-browser-handling/

至于你的第二个问题，你一次只能使用一种模式。这是不幸的，因为“光”和“较暗”更像是“混合模式”，并且对于一些其他复合模式使用非常有用。我很想看到这种变化。

Answer 2

简而言之，是的。

最后一个globalCompositeOperation值发生在渲染之前，例如的drawImage（），fillRect（）。

您可以在绘制后立即更改它以将其应用于下一个绘图，如：

http://jsfiddle.net/eCDRN/

ctx.globalCompositeOperation = "copy";
ctx.fillRect(100, 100, 100, 100);
ctx.globalCompositeOperation = "destination-in";
ctx.fillRect(150, 150, 100, 100);
ctx.globalCompositeOperation = "xor";
ctx.fillRect(175, 175, 100, 100);