캔버스 - 그라디언트의 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();