在不同浏览器中使用相同数学的不同结果

Question

编辑:因为chrome已经更新了浏览器 - 这个问题是多余的,因为他们修复了内部错误,这意味着不再出现此问题.

我有一个固定在画布中心的圆圈动画.

圆越大,运动越不稳定.但不仅如此,对我来说至少在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数学; 这是画布.

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但是对于那些之间的值是关闭的(因此OP示例中的起伏行为).

我已经记录了Chromium bug#320335.

编辑:它看起来像是在2012年5月首次报道,并且是由Skia库中的一个错误引起的.

它现在已被解决为固定的.