Question

我最近开始做一些HTML5 / Canvas的事情，并且非常愉快地开展我的业务，在Chrome中测试内容，直到我决定尝试我在Firefox中工作的东西......效果不是很好。

这是我正在做的事情的一个简单的例子。设置基本的requestAnimationFrame shim，主循环清除画布，然后更新并绘制我的对象。很容易，关于这些东西的例子是每个可以找到的地方。

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有很多口吃和撕裂，这似乎是一项相当简单的任务。

我发现了类似的问题，但没有一个明确的解决方案。这是Firefox吗？ Webkit浏览器在这方面做得更好吗？我应该放弃它并希望它在未来版本的浏览器中得到修复吗？或者也许这是我特别的设置？我正在使用Windows 7 64位和FireFox 17.0.1。

感谢任何帮助。

Answer 1

@HakanEnsari提供的解决方案似乎有效。我很好奇这个原因并发现这是因为他的代码版本没有清除整个画布。它只清除单个10x10 Rects并单独留下画布的其余部分。

这有点了，还有很多其他有用的画布性能提示： http://www.html5rocks.com/en/tutorials/canvas/performance/#toc-render-diff

所以你想要这个：

  function loop() {
    // get rid of this
    //canvas.width = canvas.width; 

    requestAnimFrame(loop);

只需清除个别信息

即可

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;

    // clear just the rect
    context.clearRect(this.x, this.y, 10, 10);

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

（调整小提琴：http://jsfiddle.net/shaunwest/B7z2d/1/）

Answer 2

显然，使用canvas.width = canvas.width;清除画布会导致Safari出现延迟（我正在使用5.1.9版浏览）。

我从未使用过这种方式来清除屏幕：相反，我使用了这个：

context.clearRect(0,0, canvas.width, canvas.height);

如果你尝试一下，它就不应该滞后了。请参阅jsfiddle。

这是清除画布的最快方法：相反，清除每个元素需要您：

跟踪每个元素位置
对要重绘的每个元素执行clearRect调用

也不适用于矩形以外的形状（因为没有clearSphere或clearPath方法）。

Answer 3

口吃的另一个原因是，在FireFox24之前，FireFox的动画与刷新率（VSYNC）没有完全同步，特别是如果刷新率不是60Hz。

它与W3C推荐的第5部分的结尾http://www.w3.org/TR/animation-timing/有关，浏览器将动画与刷新率同步。从FireFox 24开始，它现在在Windows和Chrome和FireFox上的运行几乎一样平稳。

TestUFO在http://www.testufo.com/browser.html

列出所有支持的浏览器（可以将requestAnimationFrame（）同步到刷新率）

Canvas动画在FireFox中断断续续，但在Chrome中非常完美

3 个答案: