javascript - 如何在 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)');

这是看不见的白色。