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

。