javascript - 如何在 html5 Canvas 中创建白色背景的褪色蒙版

Question

我有一个圆形 Canvas 动画，我想淡出边缘。我最终得到的解决方案是创建一个更大的 Canvas ，将其放在前面，并带有从透明到背景颜色的径向渐变。这对于黑色背景非常有用，但我不明白为什么当我制作它时会得到灰色渐变 white .

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)');

这是看不见的白色。