흰색 바탕에 html5 캔버스에 페이딩 마스크를 만드는 방법

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, 'rgba(255,255,255,0)'); 

와

g.addColorStop(0, 'transparent'); 

을 대체 할 수 있습니다.