javascript - 性能 - 重新绘制新 Canvas 或更改其 css 位置？

Question

我开始尝试使用 Javascript 进行游戏开发，在进一步研究该主题之前我只有一个问题。

是每帧绘制一个新 Canvas 更有效(性能方面)还是只更改 CSS left、right、top、和 bottom 属性？

游戏中乒乓球的例子:

此代码每秒将被调用超过 60 次，假设我们不仅有一个球，还有更多玩家，可能处于更复杂的游戏中，更多环境实体的位置也需要更新，等等。

//Draws a NEW square in a NEW location that has been
//previously updated by a game method
canvasContext.fillRect(posX, posY, ballW, ballH);

或

//ball is an stand alone canvas

//Updates the position
ball.style.left = previousPos + 1;

Answer 1

最好的方法是要么自己在一个 Canvas 上渲染它，要么使用多个球并修改它们的 transform CSS property .

使用 transform 比 top 和 left 更快。你可以这样做:

function updatePos() {
  var e = document.getElementsByClassName('ellipse');
  for (var i = 0; i < e.length; i++) {
    e[i].dataset.x = (parseFloat(e[i].dataset.x) || 0) + Math.random() * 10 - 5;
    e[i].dataset.y = (parseFloat(e[i].dataset.y) || 0) + Math.random() * 10 - 5;
    e[i].style.transform = 'translate(' + e[i].dataset.x + 'px, ' + e[i].dataset.y + 'px)';
  }
  requestAnimationFrame(updatePos);
}
updatePos();

.ellipse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background: #f00;
  border-radius: 50%;
  border: 1px solid;
}

<div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div>

本质上，您只需固定top 和left 位置并修改transform。