如何在html5画布中为白色背景创建褪色蒙版

Question

I got a circular canvas animation and I want to fade out the edges. The solution I ended up with was to create a larger canvas to put in front with a radial gradient from transparent to whatever color the background is. This works great for a black background, but I cannot figure out why I get a gray gradient when I make it 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();

Any thoughts?

Answer 1

Your problem seems to be ignoring the fact that "transparent" has a colour. Transparent maps to rgba(0,0,0,0), which is invisible black. When you transition from invisible black to visible white, in the middle you'll get transparent grey.

Therefore, you can just replace

g.addColorStop(0, 'transparent');

with

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

Which is invisible white.