Question

我有一个圆形的画布动画，我想淡出边缘。我最终得到的解决方案是创建一个更大的画布，放在前面，从透明到背景的任何颜色都有径向渐变。这适用于黑色背景，但我无法弄清楚为什么在制作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)');

哪个是看不见的白色。

如何在html5画布中为白色背景创建一个淡入淡出的蒙版

1 个答案: