Question

我正在开发一个JavaScript游戏，它有一个2d的正方形阵列，可以每帧更新背景颜色。

到目前为止，我一直在使用无边界DOM表来完成此任务，方法是每帧设置每个单元格的style.backgroundColor，但速度相当慢。有没有办法更快地做到这一点？

Answer 1

对于这种计算，直接在单个画布中绘制正方形应该更快（JS在这些天编译为相当高效的本机代码，并且您将获得的小开销可能远远小于处理DOM和.style会介绍。）

当然，只有使用您需要支持的设备/浏览器进行测试才能提供真正的答案（并注意事情可能会随着时间而变化）。

示例代码：

<!DOCTYPE html>
<html>
  <body>
    <canvas id="canvas" width=512 height=512></canvas>
    <script>

var ctx = canvas.getContext("2d");

setInterval(function(){
    for (var y=0; y<512; y+=16) {
        for (var x=0; x<512; x+=16) {
            var r = Math.floor(Math.random()*256);
            var g = Math.floor(Math.random()*256);
            var b = Math.floor(Math.random()*256);
            ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
            ctx.fillRect(x, y, 16, 16);
        }
    }
}, 0);

    </script>
  </body>
</html>

在JavaScript

1 个答案: