問題
キャンバス上の画像を左から右にスムーズに移動しようとしています。Chrome/Safari ではそれほど悪くはありませんが (まだ少しカクつきます)、複数のマシン (Windows と Mac で試した) の Firefox ではカクつきが目立ちます。私はこれを解決する方法について少し困惑しています。
私が試したこと
setTimeout の代わりに requestAnimationFrame を使用しています。キャンバス幅を設定する代わりに clearRect を使用していますが、最悪のシナリオでテストしたかったので、最小バウンディング ボックスではなくキャンバス全体をクリアしています。余分なタブを閉じました。Firebugも無効にしました。画像データ関数の代わりに drawImage を使用しています。clearRect と drawImage 以外は何もしていないので、オフスクリーン キャンバスの使用は避けました。
例 1: http://jsfiddle.net/QkvYs/
これにはフレームレートが設定されており、ゲームループの実行頻度に関係なく位置が正しいことが保証されます。スキップされたフレーム数を表示します。この例は、私が目指しているものに近いものです。フレームがスキップされていない場合でも、途切れ途切れに見えることに注意してください。約 30 fps (var frameRate = 33;) を目指したいのですが、フレームレートも試してみましたが、成功しませんでした。
例 2: http://jsfiddle.net/R8sEV/
これは、画像を移動するだけの簡単なものです。これは、複数のマシンで途切れます。
//loop
function loop() {
//request anim frame
requestAnimationFrame(loop);
//set canvas once able
if (!canvas) {
var temp = document.getElementById("testCanvas");
if (temp) {
canvas = temp;
ctx = canvas.getContext('2d');
}
}
//update and render if able
if (canvas) {
//increase x
x += 5;
//start from beginning
if (x > canvas.width) {
x = 0;
}
//clear
ctx.clearRect(0, 0, canvas.width, canvas.height);
//image
ctx.drawImage(image, x, 200);
}
}
//start
loop();
私が見たもの
この質問は以前に尋ねられたことを認識しており、質問する前に見ました。ただし、残念ながら、与えられた回答は役に立ちませんでした。
助けてくれてありがとう！それは有り難いです。