globalCompositeOperation

Question

我曾嘗試使用globalCompositeOperation在一個循環傳遞不同 字符串（source-atop，source-over等）在相同的2D背景，但我注意到 火狐讓我畫只有很少的形狀，而歌劇院只有最後。

現在，我的問題是我可以只使用一個globalCompositeOperation在 在當前的情況下？

Answer 1

你注意到這個問題的原因是瀏覽器不支持你選擇的模式。瀏覽器與globalCompositeOperation之間存在一些問題。在這一刻，有沒有怪癖瀏覽器（Chrome/Safari瀏覽器/歌劇/ 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);