globalCompositeOperation

Question

我尝试在一个循环中使用globalCompositeOperation，向它传递不同的字符串(source-atop，source-over等)。在相同的2D环境中，但我注意到Firefox只让我画了几个形状，而Opera只画了最后一个形状。

现在，我的问题是，在当前上下文中，我一次只能使用一个globalCompositeOperation吗？

Answer 1

你注意到这个问题的原因是你选择的模式不被浏览器正确支持。浏览器之间存在一些关于globalCompositeOperation的问题。目前，只有几种模式可以在不同浏览器(Chrome/Safari/Opera/Firefox)之间正常工作：

• source-over
• source-atop
• destination-over
• destination-out
• lighter
• 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);