是否根据已有的画布优化画布？

Question

如果我在画布上绘制图像并且像素最终与已经存在的像素大致相同，那么这会比我绘制所有像素最终变化的图像更快吗？

Answer 1

不幸的是，绘制到画布的所有内容都是使用合成（Porter-Duff）和混合规则绘制的，无论它之前是什么（应用相同的数学运算）。

存在某种形式的依赖性，因为现有内容可能会影响这些操作的最终结果，但不会影响性能。说各种混合模式，全局alpha，当然还有合成模式等等。

检查要绘制的内容的成本很可能超过仅绘制内容的成本，并且需要实现一种稍微复杂的机制来考虑可用于绘制的各种方法 - 即。对性能没那么有用。

浏览器供应商可能选择针对特定情况进行优化，但一般而言，无论现有内容如何：所有内容都通过混合模式，合成以及最终与背景进行Alpha混合，在上下文级别 - 这生成用于下一步的位图（或者我们可以提取为图像）。然后在元素/ DOM级别上类似的东西，以便画布及其内容与页面/ DOM内容的其余部分混合，但可以以特殊方式考虑alpha通道：

关于性能的一个例外，一般来说，当浏览器需要将canvas元素本身与背景（即元素后面的所有内容）进行复合和alpha混合时。如果为canvas元素禁用了alpha通道，浏览器可以优化此步骤，从而为我们提供更多的绘制性能。

要禁用2D上下文的Alpha通道，只需传入选项：

var ctx = canvas.getContext("2d", {alpha: false});

Answer 2

这两个动作将花费相同的时间，因为它们都在做同样的动作。像素的结果不会改变执行代码所需的时间速度：）

如果像素改变与否，像素刷新无论如何都无关紧要。