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

编辑：由于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);  
}

这是工作示例中的代码：

Chrome输出：

Firefox输出：

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

---

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

没有给你答案，但有趣的是，在Chrome上有一个数学问题

i.currentAngle => 0.0;
(deltaTime/1000 * i.rotationSpeed) = 0.025;

i.currentAngle + (deltaTime/1000 * i.rotationSpeed) = 2215385637.025;

如果将各个部分从Update（）中取出并放入draw（）中，则可以使用

var current = i.currentAngle;
var delta = (deltaTime/1000 * i.rotationSpeed);

ctx.fillText(("angle == " + current+ " delta " + delta),10,50);

您可以打印出（0.025和0）

如果你然后换成

var current = i.currentAngle;
var delta = (deltaTime/1000 * i.rotationSpeed);

i.currentAngle = current + delta;

ctx.fillText(("angle == " + i.currentAngle + " delta " + delta),10,50);

你得到了一个疯狂的大值

但如果你这样做了

var newval = current + delta;
ctx.fillText(("angle == " + newval + " delta " + delta),10,50);

然后newval的值约为0.025，这是您所期望的值

奇怪的是，如果你这样做了

var newval = current + delta;
i.currentAngle = newval

ctx.fillText(("angle == " + newval + " delta " + delta),10,50);

---

那么纽瓦尔现在是完全疯狂的价值观

问题不在于Javascript数学；它是用帆布做的

请注意，数字与Firefox中的数字完全相同，但在Chrome中，红色弧线显然绘制错误

有趣的是，这适用于所有角度，这些角度是

Math.PI/4

的倍数，但对于这些角度之间的值，这是禁用的（因此OP示例中的波动行为）

我已经登录了

编辑：它看起来像是2012年5月首次报告的，是由库中的一个bug引起的

---

现在它已被解决为

windows 8上的chrome（Iron）和arch Linux看起来不错，问题似乎出在canvas函数上（可能在浏览器中实现），因为数学函数在cos^2和sin^2之和上几乎没有错误，即使有这样的比例：@morodeer我会马上做：）30.0.1599.101在windows上，效果很好。没有看到最小数量的线反弹，甚至没有Firefox样本中的线反弹那么多，刚刚从Chrome 30更新到31，这个bug出现了，最后一部分没有意义，为什么

newval

会因为分配给

i.currentAngle

而改变？你确定那是真的吗？是的，我绝对肯定那是真的。这就是为什么这很有趣！试试看……很好的发现，我注意到

IE

是最准确的，而

FF

稍差，但没有Chrome那么差。奇怪的是，我在这里出了王牌！

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();
}