Diferentes resultados usando las mismas matemáticas en diferentes navegadores

Editar: desde Chrome ha actualizado el navegador - esta pregunta es algo redundante, ya que han corregido un error interno que significa que este problema ya no se produce.

Tengo una animación de un círculo anclado al centro del lienzo.

Cuanto más grande sea el círculo, menos estable será el movimiento. Pero no solo eso, para mí al menos es significativamente peor en Chrome para Firefox.

La matemática se hace en esta función:

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

Este es el código en ejemplo de trabajo:

Http://jsfiddle.net/96QDK /

Salidas de cromo:

Salidas de Firefox:

introduzca la descripción de la imagen aquí

Firefox parece estar más cerca de lo que estoy apuntando a Chrome sin embargo, es simplemente loco.

¿Por qué obtengo resultados tan diferentes? Debo mencionar que he preguntado a algunas personas lo que ven, y todos están viendo diferentes cantidades de inexactitud.

Author: Sir, 2013-11-16
Source

2 answers

El problema no es con las matemáticas de Javascript; es con el 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();
}

Observe que los números aparecen exactamente igual que en Firefox, pero el arco rojo obviamente se dibuja incorrectamente en Chrome.

pantallazo

Curiosamente, esto funciona para todos los ángulos que son múltiplos de Math.PI / 4 pero está desactivado para valores entre ellos (de ahí el comportamiento ondulante en el ejemplo del OP).

He iniciado sesión Chromium bug # 320335 .

EDITAR: Parece que se informó por primera vez en mayo de 2012, y fue causado por un error en la biblioteca Skia.

Ahora Se ha resuelto como fijo.

 28
Author: Paul Draper,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-08-11 20:46:28

No le da una respuesta, pero curiosamente en Chrome hay un problema con las matemáticas

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

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

Si obtiene las partes individuales en variables de Update () y en draw() para que pueda usar 

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

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

Se obtiene (0.025 y 0) impreso

Si luego cambias a 

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

i.currentAngle = current + delta;

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

Obtienes un gran valor loco.

Pero si lo haces 

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

Entonces newval tiene un valor de alrededor de 0.025 que es lo que esperarías que fuera.

Extrañamente si a continuación, haga lo siguiente

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

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

Entonces newval es ahora el valor completamente loco....

 2
Author: Code Uniquely,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-11-16 15:46:51