Почему альфа-пиксель в HTML-холсте не сочетается с цветом фона? - PullRequest
Новая
       40

Почему альфа-пиксель в HTML-холсте не сочетается с цветом фона?

2 голосов
/ 07 июня 2011

http://jsfiddle.net/jBgqW/

Я нарисовал фон с fillRect и fillStyle, установленными на rgb(255,0,0), но когда я перебираю пиксели и устанавливаю некоторый случайный цвет и значение альфа-пикселя на0 все становится белым.Я предположил, что когда пиксель прозрачный, он должен смешиваться с ранее окрашенным фоновым цветом или всегда по умолчанию с белым.

Я надеюсь, что это просто мой неправильный способ использования холста.

Может кто-нибудь объяснить, почему фон не красный в этом случае и как правильно использовать альфа-пиксель?Я хотел бы знать, имеет ли это какое-то отношение к предварительному умножению альфа.

Ответы [ 2 ]

2 голосов
/ 08 июня 2011

При использовании globalAlpha цвета пикселей рассчитываются с текущими значениями rgba и новыми значениями.

Однако в этом случае вы устанавливаете значения вручную и, следовательно, не производите никаких расчетов.Вы просто устанавливаете значения rgba самостоятельно, что означает, что альфа-канал не используется для расчета, а просто изменяется без дальнейшего использования.Предыдущий цвет (красный) в основном перезаписывается «грубой силой» - вместо rgba(255, 0, 0, 255) он теперь просто rgba(128, 53, 82, 0).Оригинальный красный цвет был просто выброшен.

В результате альфа в 0 представляет полную прозрачность, поэтому вы видите цвета родительского элемента.

Это можно подтвердить, если вы измените цвет фона тела: http://jsfiddle.net/jBgqW/2/.

0 голосов
/ 29 января 2014

Это в некоторой степени некромантия, но я только что столкнулся с этой проблемой и нашел решение, если не для оригинального плаката, то для таких людей, как я, из Google.

Как уже отмечалось, putImageData напрямую заменяет пиксели, а не альфа-смеси, но это также означает, что они сохраняют ваши альфа-данные. Затем вы можете перерисовать это изображение с помощью альфа-наложения, используя drawImage.

Для примера давайте представим, что у нас есть холст размером 200 на 100 пикселей и объект imageData размером 100 на 100. 

// our canvas

var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");

// our imageData, created in whatever fashion, with alpha as appropriate...
var data = /* ... */

// lets make the right half of our canvas blue
ctx.fillStyle="blue";
ctx.rect(100, 0, 100, 100);
ctx.fill();

// now draw our image data to the left (white) half, pixels are replaced
ctx.putImageData(data, 0, 0, 100, 100);

// now the magic, draw the canvas to itself with clipping
ctx.drawImage(canvas, 100, 0, 100, 100, 100, 0, 100, 100);

Вуаля. Правая половина изображения теперь является данными вашего изображения, смешанными с синим фоном, с помощью аппаратного обеспечения.

...