5

我最近开始做一些 HTML5/Canvas 的东西,并且非常愉快地开展我的业务,​​在 Chrome 中测试东西,直到我决定尝试我在 Firefox 中所做的工作......效果不太好。

这是我正在做的那种事情的一个简单的例子。设置基本的 requestAnimationFrame 垫片,主循环清除画布,然后更新并绘制我的对象。很简单,关于这些东西的例子随处可见。

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

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

任何帮助表示赞赏。

4

3 回答 3

1

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

这有点涉及,还有很多其他有用的画布性能提示: 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/

于 2013-07-16T22:22:03.490 回答
0

卡顿的另一个原因是在 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() 到刷新率)

于 2013-10-06T16:51:26.910 回答
0

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

我从来没有使用过这种清除屏幕的方式:相反,我使用了这种方式:

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

如果您尝试一下,它应该不再落后。见jsfiddle


这是清除画布的最快方法:相反,清除每个单独的元素需要您:

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

并且也不适用于矩形以外的形状(因为没有clearSphereorclearPath方法)。

于 2013-07-16T22:40:11.530 回答