☰

同じ計算を異なるブラウザで使用しても結果が異なる 質問する

tag-icon • tag-icon javascript math v8 spidermonkey
同じ計算を異なるブラウザで使用しても結果が異なる 質問する

編集: 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/

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 のバグ #320335。

編集：これは2012年5月に最初に報告されたようで、スキア図書館。

現在は次のように解決されています修理済み。

おすすめ記事