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

Question

如果要使用具有透明度的颜色，最好使用什么来获得更好的性能

strokeStyle 使用 rgba 还是 globalAlpha？

第一：

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

第二：

context.globalAlpha = "0.5";

Answer 1

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

影响性能的是您选择的混合模式（lighter aka plus 除外，因为这是一个复合操作）（混合模式，可分离和不可分离，例如屏幕，覆盖，颜色，色调等也通过globalCompositeOperation设置，以及关闭背景alpha（见下文）。

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

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

或：

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

Fa/b 因使用的运算符而异，例如，source-over 将是：Fa = 1; Fb = 1 – αs。

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

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

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

理论上，如果背景 alpha 为 1，则不需要最后一个混合阶段，但由于您使用的 alpha 不是 1 的颜色或globalAlpha，因此需要“混合”。

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

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

如果您不需要画布背景不透明，则关闭背景 Alpha 可以大大提高性能。

旧版 Opera 已经支持了一段时间了，Chrome（或者是 FF……不记得了）最近才开始支持它，FF（或 Chrome）/IE 稍后会支持它（它只是如果不支持则忽略，因此提供它没有害处）。

有关合成/混合的浏览器实现的更多详细信息，请参阅this link。

希望这能提供一些意见（免责声明：已经很晚了，而且还没有很长的公式，所以我明天会仔细检查）。