HTML5 canvas strokeStyle 之间的表现 rgba/globalAlpha

Question

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

使用 rgba 或 globalAlpha 的 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";

Answer 1

没有，至少没有引起注意。无论您为全局 alpha 使用什么值，混合和合成过程都是相同的（假设生成的背景 alpha 永远不会是 1）。

影响性能的是您选择的混合模式（lighter 又名 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.

然后结果是 "mixed" 使用全局 alpha（Cb = 包含背景 alpha）回到 canvas。

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

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

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

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

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

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

老Opera支持它有一段时间了，Chrome（或者是FF...记不清了）最近才开始支持它和FF（或Chrome）/ IE 稍后会支持它（如果不支持它会被忽略，所以提供它没有坏处）。

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

希望这能提供一些输入（免责声明：已经晚了，而且还不太了解长公式，所以我明天会仔细检查）。

HTML5 canvas strokeStyle 之间的表现 rgba/globalAlpha

HTML5 canvas performance between strokeStyle rgba/globalAlpha

html5-canvas

alpha

rgba