Canvas globalCompositeOperation模式應該來自drawImage嗎？

Question

我正在使用globalCompositeOperation ='copy'然后使用drawImage，以便我的新圖像替換下面的內容。

這適用於Mac和Windows以及iPad上的最新Safari和Chrome瀏覽器。

它在IE 9中不起作用，雖然它在Firefox 3.6中有效，但它在Firefox 4.0中不起作用。

當它不工作時似乎發生的是整個畫布被擦除，而不僅僅是我傳遞給drawImage的矩形區域。

我認為這是IE 9和Firefox 4.0中的一個錯誤，但我不應該期望它能夠工作嗎？

Answer 1

這就是所謂的Mozilla是假設畫布應該工作的圖片 ：

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing#globalCompositeOperation

問題是規范在這里寫得相當模糊。 例如，對於復制復合類型，它顯示為：

Display the source image instead of the destination image.

這可以被視為source-over的同義詞，或者它可以被理解為“清除整個畫布然后將新的繪制操作復制到畫布上”

要了解不同瀏覽器的實現方式有何不同，請使用上面mozilla提供的圖像，以及Mozilla提供的所有不同復合形狀的實時觸發（不是圖像，畫布）：

https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html

快速瀏覽一下，Chrome 11似乎不同意Firefox 4的源代碼，源代碼，目標位置，目標位置，更暗和復制。

一目了然，需要注意的是，所有差異都與是否應該清除不相關的像素有關。 Mozilla似乎這么認為，Google沒有。

Answer 2

當您使用帶有globalCompositeOperation =“copy”的drawImage（）時，意外的是在目標矩形之外清除畫布。 但這似乎是如何解釋標准的共識。 即使使用fillRect（）或繪制線條，也會清除整個畫布。 您必須設置剪裁區域以防止這種情況。

有關討論，請參閱： https ： //bugzilla.mozilla.org/show_bug.cgi？id = 366283