小编die*_*ego的帖子

画布动画在 FireFox 中卡顿,但在 Chrome 中完美

我最近开始做一些 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 = …
Run Code Online (Sandbox Code Playgroud)

html javascript firefox animation canvas

5
推荐指数
1
解决办法
2950
查看次数

标签 统计

animation ×1

canvas ×1

firefox ×1

html ×1

javascript ×1