Html5 canvas strokeStyle rgba/globalAlpha之间的HTML5画布性能

如果想要使用透明的颜色，那么为了获得更好的性能，最好使用什么

用rgba或GLOBALALLPHA进行strokeStyle

第一:

var rChannel = 0;
var gChannel = 0;
var bChannel = 0;
var aChannel = 0.5;
context.strokeStyle("rgba(" + rChannel + "," + gChannel + "," + bChannel + "," + aChannel + ")");

第二：

context.globalAlpha = "0.5";

---

不，至少不明显。无论全局alpha使用什么值（假设生成的背景alpha从不为1），混合和合成过程都是相同的

影响性能的是您选择的混合模式（除了<代码>打火机aka<代码>plus，因为这是一种复合操作）以及关闭背景alpha（混合模式，可分离和不可分离，如屏幕、覆盖、颜色、色调等，也通过<代码>全局复合操作设置）（见下文）

所有浏览器都使用所谓的。这对所有合成类型使用相同的公式：

co = αs x Fa x Cs + αb x Fb x Cb

或：

Fa/b

根据所使用的运算符而变化，例如

sourceover

它们将是：

Fa=1；Fb=1–αs

然后使用全局alpha（Cb=包含背景alpha）将结果“混合”回画布

因此，无论对alpha使用什么值，像素都会通过相同的公式运行，不会产生性能差异（这些公式通常组合到单个步骤中；对于混合，只考虑相交区域）

理论上，如果背景alpha为1，则不需要最后一个混合阶段，但当您对颜色或

globalAlpha

使用alpha而不是1时，则需要“混合”

但是，2D上下文有一个鲜为人知的选项参数（，请参见接口定义下方的绿色框）：

如果您不需要画布背景是非不透明的，那么关闭背景alpha可以大大提高性能

它已经被old Opera支持了一段时间，Chrome（或者是FF…不记得了）最近才开始支持它，FF（或者Chrome）/IE稍后将支持它（如果不支持它，它将被忽略，所以提供它没有坏处）

有关合成/混合的浏览器实现的详细信息，请参见

---

希望这能提供一些信息（免责声明：现在已经晚了，而且还没有很长的公式，所以我明天会再次检查）。

问得好！我猜这两种浏览器都会在内部转换为相同的上下文状态，因为它们都有相同的效果。不如为我们进行性能测试，并报告您的发现。-@markE是对的，只有测试（例如使用jsperf）才能得到肯定的答复。如果您搜索关于该主题的现有jsperf，请注意：90%的jsperf都会测量所有内容，除了声明的内容。可能是初学者：更新它以测试您的用例。正如您将看到的，除非您选择以某些浏览器为目标或忽略某些浏览器，否则很难对性能有一个清晰的了解。混合和合成的过程是完全相同的。这里的性能有一个明显的不同：这与你所说的没有区别是矛盾的。

color out = alpha source x Fa x Color Source + 
            alpha background (or destination) x Fb x Color Background

Cr = (1 - αb) x Cs + αb x B(Cb, Cs)  // B() = Blending mode

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