HTML5画布的DrawImage口吃/抖动现象 [英] HTML5 Canvas DrawImage Stutter / Choppiness
问题描述
问题
我想一个画布上从左向右移动顺利上获得的图像。这不是太糟糕了在Chrome / Safari浏览器（仍然口吃一点），但在Firefox明显口吃在多台机器（试图在Windows和Mac）。我有点难倒就如何解决这个问题。
I am trying to get an image on a canvas to move from left to right smoothly. It's not too bad on Chrome/Safari (still stutters a little), but there is noticeable stutter in Firefox on multiple machines (tried on Windows and Mac). I'm a bit stumped as to how to solve this.
我的尝试
我使用requestAnimationFrame，而不是setTimeout的。我使用clearRect，而不是设置画布宽度，虽然我清除整个画布，而不是最小的边框，因为我想测试它在最坏的情况下。我没有关闭多余的标签。我甚至禁用萤火虫。我使用的drawImage而不是图像数据的功能。因为我没有做任何东西，但clearRect和drawImage方法，我避免使用屏幕外的画布。
I am using requestAnimationFrame instead of setTimeout. I am using clearRect instead of setting the canvas width, though I am clearing the entire canvas instead of the minimum bounding box as I wanted to test it in the worst case scenario. I did close extra tabs. I even disabled Firebug. I am using drawImage instead of the image data functions. Since I'm not doing anything else but clearRect and drawImage, I avoided using an offscreen canvas.
例1： http://jsfiddle.net/QkvYs/
这其中有一组帧率它确保了无论多久的游戏循环运行的立场是正确的。它显示帧数跳过。这个例子更接近是我的目标了。请注意，它看起来波涛汹涌，即使被跳过没有帧。我还与没有成功帧率发挥各地，但我想瞄准大约每秒30帧（VAR帧率= 33;）
This one has a set framerate where it ensures that the position is correct regardless of how often the game loop runs. It displays the number of frames skipped. This example is closer to what I'm aiming for. Note that it looks choppy even when no frames are being skipped. I have also played around with the framerate with no success, though I'd like to aim for about 30 fps (var frameRate = 33;).
例2： http://jsfiddle.net/R8sEV/
下面是一个简单的，所有它的作用是移动图像。这口吃，我在多台机器。
Here is a simple one where all it does is move the image. This stutters for me on multiple machines.
//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();
我看了
我意识到，这个问题以前有人问，我也期待前问。不过，考虑到答案不幸没有帮助。
I realize that this question has been asked before and I did look before asking. However, the answers given have unfortunately not helped.
-
<一个href=\"http://gamedev.stackexchange.com/questions/37298/slow-firefox-javascript-canvas-performance\">http://gamedev.stackexchange.com/questions/37298/slow-firefox-javascript-canvas-performance
<一个href=\"http://stackoverflow.com/questions/9944961/html5-canvas-animation-has-occasional-jitter-hesitation-stutter\">HTML5帆布动画已经偶尔抖动/犹豫/口吃
<一个href=\"http://stackoverflow.com/questions/14198233/canvas-animation-stutters-in-firefox-but-is-perfect-in-chrome\">Canvas动画断断续续在FireFox但在Chrome浏览器
<一个href=\"http://stackoverflow.com/questions/6513940/is-there-a-solution-for-html5-canvas-animation-stutter\">Is那里HTML5画布动画口吃的解决方案？
感谢您的帮助！我AP preciate它。
Thanks for the help! I appreciate it.
推荐答案
例如利用时间差在你的位置计算。这将确保目的是通过在给定的时间，无论FPS的帧之间的某些值和延迟移动。
For instance use time delta in your position calculations. This will ensure that object is moved by certain value in given time regardless of FPS and delay between frames.
编辑您的提琴：
http://jsfiddle.net/R8sEV/2/
错误的做法：
X + = 5
好办法：
X + =速度*三角洲/ 1000
其中，δ是时间[毫秒]从上一帧传递 - 和速度是衡量[像素/秒]
where delta is time in [ms] which passed from last frame - and speed is measured in [pixels/second]
这篇关于HTML5画布的DrawImage口吃/抖动现象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
