HTML5 производительность холст между StrokeStyle RGBA/globalAlpha

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

Нет, по крайней мере, не какой-либо заметной. Процесс смешивания и компоновки тот же, независимо от того, какое значение вы используете для глобальной альфы (при условии, что в результате фоновая альфа никогда не равна 1).

Что может повлиять на производительности является который смешивание режима (кроме lighter акой plus, так как это является составной операцией) вы выбираете (режимы смешивания, разъемные и не разъемная, такие как экран, наложение, цвет, оттенок и т.д. также устанавливается через globalCompositeOperation), а также отключение фоновой альфы (см. ниже).

Все браузеры используют то, что называется Porter Duff Compositing Operators. При этом используется та же формула для всех типов Compositing:

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.

Затем результат «смешанный» назад на холсте, используя глобальную альфу (Cb = содержащий фон альфа).

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

Так никакого значения независимо от того, используется для альфа, пиксели не проходит через те же формулы не давая никакой разницы производительности (эти формулы, как правило, объединены в одну стадию, для смешивания только пересекающихся областей считаются).

Теоретически, если фон альфа был 1, этот последний этап смешивания не понадобился бы, но поскольку вы используете альфа, отличную от 1 для любого цвета, или globalAlpha, он должен быть «смешанным».

Существует, однако, менее известный параметр опции для 2D контекста (CanvasRenderingContext2DSettings см зеленого поля ниже определения интерфейса):

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

Отключение фонового альфа может ускорить производительность совсем немного, если вы не нужно, чтобы фон холста был непрозрачным.

Он был поддержан старой Opera, Chrome (или был FF ... не помню), недавно начал поддерживать его, а FF (или Chrome)/IE будет поддерживать его позже (он будет просто быть проигнорированным, если не поддерживается, поэтому нет вреда для него).

Для получения дополнительной информации о реализации компоновки/смешивания браузера см. this link.

Надеюсь, что это даст некоторый вклад (отказ от ответственности: поздно и голова не совсем до длинных формул, поэтому я дважды проверю завтра).