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

Изменить: поскольку хром обновил браузер - этот вопрос является некоторым излишним, поскольку они исправили внутреннюю ошибку, что означает, что эта проблема больше не возникает.

У меня есть анимация круга, привязанного к центру холста.

Чем больше круг становится менее устойчивым, тем больше движение. Но не только это, для меня, по крайней мере, это значительно хуже в 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 просто дурацкий.

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

Ответ 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.

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

Теперь он разрешен как исправлено.

Ответ 2

Не дает вам ответа, но интересно, что в 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 теперь является абсолютно сумасшедшим значением....