Разные результаты с использованием одной и той же математики в разных браузерах

Edit: поскольку 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/

хром выходы:

Firefox И Выходы:

Firefox, кажется, ближе всего к тому, к чему я стремлюсь, но Chrome просто дурацкий.

почему я получаю такие разные результаты? Я должен упомянуть, что я спросил несколько человек, что они видят, и все видят по-разному количество неточностей.

2 52
javascript mathjax v8 spidermonkey

2 ответа:

проблема не с математикой 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.

screenshot

интересно, что это работает для всех углов, кратных Math.PI / 4 но выключен для значений между ними (отсюда и волнообразное поведение в например, операция).

Я хром ошибка #320335.

EDIT: похоже, что это было впервые сообщено в мае 2012 года, и было вызвано ошибкой в Skia библиотека.

теперь он был разрешен как основные.

28

не дает вам ответа, но интересно, что в 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);

тогда newval теперь совершенно сумасшедшее значение....

2