habilitar - desactivar javascript chrome

Diferentes resultados usando las mismas matemáticas en diferentes navegadores

Question

Editar: desde que Chrome actualizó el navegador, esta pregunta es un tanto redundante ya que han solucionado un error interno que significa que este problema ya no ocurre.

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

Cuanto más grande se vuelve el círculo, menos estable es 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 el ejemplo de trabajo:

http://jsfiddle.net/96QDK/

Salidas de Chrome:

Productos de Firefox:

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

¿Por qué obtengo resultados tan diferentes? Debo mencionar que he preguntado a algunas personas qué es lo que ven y que todo el mundo ve cantidades de imprecisión diferentes.

Answer 1

El problema no está en las matemáticas de Javascript; es con el lienzo .

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

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

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 registrado el error Chromium # 320335 .

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

Ahora se ha resuelto como fixed .

Answer 2

No te 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 draw () para que pueda usar

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

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

obtienes (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.

Curiosamente si haces 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 ...