javascript - Canvas globalCompositeOperation 模式是否应该从 drawImage 工作？

Question

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

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

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

当它不工作时似乎会发生的事情是整个 Canvas 都被删除，而不仅仅是我传递给 drawImage 的矩形区域。

我认为这是 IE 9 和 firefox 4.0 中的错误，但我不应该期望它起作用吗？

Answer 1

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

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

问题是规范在这里写得相当模糊。例如，对于复制复合类型，它是这样写的:

显示源图像而不是目标图像。

可以理解为source-over的同义词，也可以理解为“清除整个 Canvas ，然后将新的绘制操作复制到 Canvas 上”

要查看不同浏览器在实现方面的差异，请使用上面由 mozilla 提供的图像以及由 Mozilla 提供的所有不同复合形状的实时发射(不是图像， Canvas ):

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

快速浏览一下，Chrome 11 似乎在源输入、源输出、目标输入、目标顶部、较暗和复制方面与 Firefox 4 不一致。

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