Javascript Firefox RadialGradient

Question

对于我的爱好游戏项目，我们（和朋友一起）使用HTML + JS。并在画布上画画。我们用这种代码绘制气球：

var radGrad = ctx.createRadialGradient(this.p.x - this.radius / 4, this.p.y - this.radius / 4, this.radius, this.p.x - this.radius / 2, this.p.y - this.radius / 2, 0);
        radGrad.addColorStop(1, "rgba(255, 255, 255, 0.8)");
        radGrad.addColorStop(0, this.color);
        ctx.fillStyle = radGrad;
        ctx.beginPath();
        ctx.arc(this.p.x, this.p.y, this.radius, 0, Math.PI * 2, true);
        ctx.closePath();
        ctx.fill();

在Safari和Chrome中我们得到了正常的行为。在Mac OS上的Firefox中也是正常的。但对于Windows上的Firefox，我们得到了：

http://dl.dropboxusercontent.com/u/5283279/Screenshots/2013-04-26%2013_10_26-BalloonSucker.png

当我关闭Firefox中的硬件加速时 - 一切正常，但这是公开的，所以我不建议其他人将其关闭。

Answer 1

我终于解决了。在firefox中，当内部渐变圆超出外部时。解决它：

var cInner = [ this.p.x - this.radius / 4, this.p.y - this.radius / 4, this.radius ],
cOuter = [ this.p.x - this.radius / 2, this.p.y - this.radius / 2, 0 ];

var radGrad = ctx.createRadialGradient(
    cOuter[0],cOuter[1],cOuter[2],
    cInner[0],cInner[1],cInner[2]
);
radGrad.addColorStop(0, "rgba(255, 255, 255, 0.8)");
radGrad.addColorStop(1, this.color);