Javascript 径向梯度

对于我的爱好游戏项目，我们（和朋友）使用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，我们得到了：

---

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

我终于解决了这个问题。在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);