2

对于我的爱好游戏项目，我们（和朋友）使用 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 中关闭硬件加速时 - 一切正常，但这是公开的，所以我不能推荐其他人关闭它。

4

1 回答 1

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);
于 2013-05-06T13:00:03.973 回答