如何在html5畫布中為白色背景創建褪色蒙版

Question

我有一個圓形的畫布動畫，我想淡出邊緣。 我最終的解決方案是創建一個更大的畫布，以從透明到背景顏色的徑向漸變放置在前面。 這對於黑色背景非常有用，但是我無法弄清楚為什么將其設置為白色時會出現灰色漸變。

var c = document.getElementById('canvas'),
    ctx = c.getContext('2d'),
    w = 300,
    w2 = w / 2,
    h = 300,
    h2 = h / 2,
    cr = 100
;

c.width = w;
c.height = h;
ctx.rect(0, 0, w, h);
var g = ctx.createRadialGradient(
    w2,
    h2,
    1,
    w2,
    h2,
    cr * 90 / 100
);
g.addColorStop(0, 'transparent');
g.addColorStop(1, '#ffffff');
ctx.fillStyle = g;
ctx.fill();

有什么想法嗎？

Answer 1

您的問題似乎正在忽略“透明” 具有顏色的事實。 透明映射到rgba（0,0,0,0），這是不可見的黑色。 當您從不可見的黑色過渡到可見的白色時，在中間，您將獲得透明的灰色。

因此，您只需更換

g.addColorStop(0, 'transparent');

同

g.addColorStop(0, 'rgba(255,255,255,0)');

這是無形的白色。