Question

如果想要使用具有透明度的颜色

，最好使用什么来获得更好的性能

strokeStyle with rgba or 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又名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，则不需要最后一个混合阶段，但是当您使用1以外的alpha或globalAlpha时，它将需要“混合”。

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

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

如果您不需要画布背景为非透明，关闭背景alpha可以提高性能。

旧的Opera已经支持了一段时间，Chrome（或者它是FF ......记不起来）刚刚开始支持它，而FF（或Chrome）/ IE稍后会支持它（它只会是如果不支持则忽略，因此提供它没有任何害处。）

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

希望这会给出一些意见（免责声明：它已经很晚了，并且不太长，所以我明天会仔细检查）。

strokeStyle rgba / globalAlpha之间的HTML5 canvas性能

1 个答案: