Des résultats différents en utilisant les mêmes calculs dans des navigateurs différents

Question

J'ai une animation d'un cercle ancré au centre de la toile.

Plus le cercle est grand, moins le mouvement est stable. Mais ce n'est pas tout, pour moi en tout cas, c'est nettement moins bon dans Chrome que dans Firefox.

Les calculs sont effectués dans cette fonction :

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

Voici le code de l'exemple de travail :

http://jsfiddle.net/96QDK/

Sorties en chrome :

Les sorties de Firefox :

Firefox semble être le plus proche de ce que je cherche à obtenir, mais Chrome est tout simplement farfelu.

Pourquoi ai-je des résultats si différents ? Je dois préciser que j'ai demandé à quelques personnes ce qu'elles voyaient, et tout le monde voit des quantités différentes d'inexactitude.

Answer 1

Le problème ne se situe pas au niveau des mathématiques Javascript, mais plutôt au niveau de l'interface utilisateur. toile .

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

Remarquez que les chiffres apparaissent exactement est le même que dans Firefox, mais l'arc rouge est manifestement mal dessiné dans Chrome.

Il est intéressant de noter que cela fonctionne pour tous les angles qui sont des multiples de Math.PI / 4 mais est désactivé pour les valeurs comprises entre celles-ci (d'où le comportement ondulatoire dans l'exemple de l'OP).

J'ai enregistré Bogue Chromium #320335 .

EDIT : Il semble que cela ait été causé par un bug dans l'application Skia bibliothèque.

Answer 2

Cela ne vous donne pas de réponse, mais il est intéressant de noter que sur Chrome, il y a un problème avec les maths.

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

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

Si vous faites passer les différentes parties dans des variables hors de Update() et dans draw() de façon à pouvoir utiliser la fonction

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

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

vous obtenez (0.025 et 0) imprimé

si vous passez ensuite à

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

i.currentAngle = current + delta;

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

Vous obtenez une valeur folle.

mais si vous le faites

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

alors newval a une valeur d'environ 0,025, ce qui correspond à ce que vous attendez.

Bizarrement, si vous faites ensuite ce qui suit

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

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

alors newval est maintenant la valeur complètement folle....