畫布 - RGBA漸變不起作用

Question

我只想用rgba來用漸變填充對象。然而屏幕上沒有任何東西出現，簡單的addcolorstop可以工作，而不是使用rgba。

這工作：

var ctx = this.context; 
    var fillColor = ctx.createRadialGradient(100, 100, 10, 100, 100, 70); 
    fillColor.addColorStop(0.2, "green"); 

    ctx.fillStyle = fillColor; 
    ctx.beginPath(); 
    ctx.arc(obj.x, obj.y, obj.r, 0, 2 * Math.PI, true); 
    ctx.closePath(); 
    ctx.fill(); 

這不：

var ctx = this.context; 
    var fillColor = ctx.createRadialGradient(100, 100, 10, 100, 100, 70); 
    grad.addColorStop(0.0, 'rgba(0,0,0,1)'); 
    grad.addColorStop(0.5, 'rgba(0,0,0,0)'); 
    grad.addColorStop(1.0, 'rgba(0,0,0,1)'); 
    ctx.fillStyle = fillColor; 
    ctx.beginPath(); 
    ctx.arc(obj.x, obj.y, obj.r, 0, 2 * Math.PI, true); 
    ctx.closePath(); 
    ctx.fill(); 

Answer 1

對我來說，這兩個例子不工作。如果我假設this是畫布，則應使用getContext()方法返回畫布上繪製的對象：

var ctx = canvas.getContext('2d'); 
var grd = ctx.createRadialGradient(100, 100, 10, 100, 100, 70); 
grd.addColorStop(0, 'rgba(0,0,0,0)'); 
grd.addColorStop(1, 'rgba(0,0,0,1)'); 

ctx.fillStyle = grd; 
ctx.beginPath(); 
ctx.arc(150, 150, 100, 0, 2 * Math.PI, true); 
ctx.closePath(); 
ctx.fill();