javascript - 在不同的浏览器中使用相同的数学运算得到不同的结果

Question

编辑:由于 chrome 已经更新了浏览器 - 这个问题有些多余，因为他们已经修复了一个内部错误，这意味着这个问题不再发生。

我有一个固定在 Canvas 中心的圆圈动画。

圆圈越大，运动越不稳定。但不仅如此，至少对我来说，Chrome 比 Firefox 差得多。

数学是在这个函数中完成的:

function update(deltaTime){
    var centerX = canvas.width/2;
    var centerY = canvas.height/2;
        i.currentAngle = (i.currentAngle || 0) + (deltaTime/1000 * i.rotationSpeed);

    if(i.currentAngle>2*Math.PI){
        i.currentAngle-=2*Math.PI;
    }
        i.x = centerX + (i.radius*i.factor) * Math.cos(i.currentAngle);
        i.y = centerY + (i.radius*i.factor) * Math.sin(i.currentAngle);  
}

这是工作示例中的代码:

http://jsfiddle.net/96QDK/

Chrome 输出:

Firefox 输出:

Firefox 似乎最接近我的目标，但 Chrome 却很古怪。

为什么我会得到如此不同的结果？我应该提一下，我问过几个人他们看到了什么，每个人都看到了不同程度的不准确。

Answer 1

问题不在于 Javascript 数学；它与 Canvas 有关。

http://jsfiddle.net/LDWBX/

function bigCircle(angle) {
    var radius = 5000; //the bigger, the worse
    var x = canvas.width/2 + radius*Math.cos(angle);
    var y = canvas.height/2 + radius*Math.sin(angle);

    ctx.beginPath();
    ctx.arc(x, y, radius, 0, 2 * Math.PI);
    ctx.lineWidth = 2;
    ctx.stroke();
}

请注意数字显示完全与在 Firefox 中相同，但红色弧线在 Chrome 中显然绘制不正确。

有趣的是，这适用于 Math.PI/4 的倍数的所有 Angular ，但对于它们之间的值无效(因此 OP 示例中的波动行为)。

我已经登录 Chromium bug #320335 .

编辑:它似乎是在 2012 年 5 月首次报告的，是由 Skia 中的错误引起的图书馆。

现已解析为fixed .