帆布动画断断续续在FireFox，但在Chrome完美 [英] Canvas animation stutters in FireFox but is perfect in Chrome

问题描述

我最近买了约做一些HTML5 /画布的东西，要去我的生意很愉快，测试的东西在Chrome中，直到我决定尝试什么，我已经在Firefox一直在努力...不工作那么好。

I recently got about doing some HTML5/Canvas stuff and was going about my business quite happily, testing stuff in Chrome, until I decided to try what I have been working on in Firefox... doesn't work so good.

这是我做的那种东西的梗概例子。建立基本requestAnimationFrame垫片，主循环清除画布，然后更新，并提请我的对象。很容易的，这个东西的例子是每一个地方被发现。

This is a bare bones example of the kind of stuff I'm doing. Setting up the basic requestAnimationFrame shim, the main loop clears the canvas and then updates and draws my objects. Easy enough, examples about this stuff are every where to be found.

function loop() {
  canvas.width = canvas.width;

  requestAnimFrame(loop);

  rR.update();
  rG.update();
  rB.update();
  rY.update();

  rR.draw();
  rG.draw(); 
  rB.draw();
  rY.draw();
}

function Rect(color, x, y, speedX, speedY) {
  this.x = x;
  this.y = y;
  this.color = color;
  this.speedX = speedX;
  this.speedY = speedY;
}

Rect.prototype.draw = function () {
  context.fillStyle = this.color;
  context.beginPath();
  context.rect(this.x, this.y, 10, 10);
  context.closePath();
  context.fill();
};

Rect.prototype.update = function () {
  if (this.x < 0 || this.x > canvas.width) this.speedX = -this.speedX;
  if (this.y < 0 || this.y > canvas.height) this.speedY = -this.speedY;

  this.x += this.speedX;
  this.y += this.speedY;
};

var rR = new Rect("#FF0000", canvas.width/2, canvas.height/2, 2, 2);
var rG = new Rect("#00FF00", canvas.width/2, canvas.height/2, -2, -2);
var rB = new Rect("#0000FF", canvas.width/2, canvas.height/2, 2, -2); 
var rY = new Rect("#FFFF00", canvas.width/2, canvas.height/2, -2, 2);

http://jsfiddle.net/Polaris666/psDM9/3/

当我测试在Chrome它看起来很棒，但Firefox有很多口吃和撕裂，对什么似乎相当简单的任务。

When I test that in Chrome it looks great, but Firefox has a lot of stuttering and tearing, for what seems a rather simple task.

我也发现了类似的问题，但具有良好的明确的解决方案无法比拟的。这是一个Firefox的事情吗？是的Webkit浏览器只擅长做这更好？我是不是应该放弃它，并希望它被固定在浏览器的未来版本？或者，也许这是我的具体设置？我使用Windows 7 64位与Firefox 17.0.1。

I have found similar questions but none with a good clear solution. Is this a Firefox thing? Are Webkit browsers just better at doing this? Should I just give up on it and hope it is fixed in future versions of the browser? Or maybe it is my particular set up? I'm using Windows 7 64bit with FireFox 17.0.1.

任何帮助是AP preciated。

Any help is appreciated.

推荐答案

的断断续续的另一个原因是，直到FireFox24，火狐的动画不是完全同步于刷新速率（VSYNC），特别是如果刷新率并不正是60赫兹。

Another reason of the stutters is that until FireFox24, the animations of FireFox was not fully synchronized to the refresh rate (VSYNC), especially if the refresh rate was not exactly 60Hz.

它与W3C建议， HTTP第5月底做：// WWW .w3.org / TR /动画定时/ ，在浏览器同步动画的刷新率。现在运行几乎同样的那样顺利在这两个Chrome和Firefox在Windows，因为FireFox的24。

It has to do with the end of section 5 of W3C recommendation, http://www.w3.org/TR/animation-timing/ for the browsers to synchronize animations to the refresh rate. It now runs almost equally as smoothly in both Chrome and FireFox on Windows, since FireFox 24.

TestUFO列出了所有支持的浏览器（可以同步requestAnimationFrame（）的刷新率）在的http：/ /www.testufo.com/browser.html

TestUFO lists all the supported browsers (that can sync requestAnimationFrame() to the refresh rate) at http://www.testufo.com/browser.html

这篇关于帆布动画断断续续在FireFox，但在Chrome完美的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！