Canvas globalCompositeOperation 模式是否应该在 drawImage 中工作？答案

【问题标题】：Should the Canvas globalCompositeOperation modes work from drawImage?Canvas globalCompositeOperation 模式是否应该在 drawImage 中工作？
【发布时间】：2011-07-20 22:06:13
【问题描述】：

我使用 globalCompositeOperation = 'copy' 然后是 drawImage 以便我的新图像替换下面的内容。

这在 Mac 和 Windows 以及 iPad 上的最新 Safari 和 Chrome 浏览器中运行良好。

它在 IE 9 中不起作用，在 Firefox 3.6 中起作用，但在 Firefox 4.0 中不起作用。

当它不工作时似乎发生的是整个画布被擦除，而不仅仅是我传递给 drawImage 的矩形区域。

我认为这是 IE 9 和 firefox 4.0 中的一个错误，但我不应该期望它可以工作吗？

【问题讨论】：

标签： javascript canvas

【解决方案1】：

这些是 Mozilla 假设 Canvas 应该工作的图像：

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 似乎在 source-in、source-out、destination-in、destination-atop、darker 和 copy 方面与 Firefox 4 存在分歧。

乍看之下，需要注意的是，所有的差异都与是否应该清除不相关的像素有关。 Mozilla 似乎是这么认为的，而 Google 不这么认为。

【讨论】：

我看到 Opera 11.10 遵循 FF4 行为。这是一张相关的 Chrome 票证 — code.google.com/p/chromium/issues/detail?id=37799
对于图像是另一个位图的情况，webkit 的行为似乎更明智......在我的代码中，解决方案是在 drawImage 之前执行 clearRect 并使用“复制”或设置剪辑在drawImage之前。 clearRect 方式比设置剪辑要慢得多，尤其是在 iPad 上。
其实the spec并不含糊，只是很难读懂。它参考了Porter and Duff 的一篇论文，该论文给出了完整的算法。 “复制”操作对应于 Porter 和 Duff 的 (0, A, 0, A) 元组，这意味着即使源像素是透明的，目标像素也会被擦除。在所有这些情况下，Firefox 都是正确的，而 Chrome 似乎有问题（根据我对规范的阅读）。但是，规范并没有说“复制”应该擦除 drawImage 矩形之外的像素。

【解决方案2】：

当您将 drawImage() 与 globalCompositeOperation="copy" 一起使用时，意外地会在目标矩形之外清除画布。但这似乎是如何解释标准的共识。即使使用 fillRect() 或绘制线条时，也会清除整个画布。你必须设置一个剪辑区域来防止这种情况发生。

如需讨论，请参阅：https://bugzilla.mozilla.org/show_bug.cgi?id=366283

【讨论】：