Question

我正在这里https://victorzhou.com/blog/build-an-io-game-part-1/上展示一个基本的io游戏的教程，并遇到了一个有关在每一帧渲染整个画布的问题。进行更多搜索后，建议在每一帧重新绘制整个画布。我试图理解为什么总是总是重新绘制整个画布，而不是仅更新我们感兴趣的形状/区域？有人可以指出这方面的最佳方法是什么，相同的利弊是什么。

此外，如果我们需要在特定区域上放置一些粒子，例如短动画或任何具有随机性的动画（例如fireworks.js），那么在渲染整个框架时如何实现？

谢谢。

Answer 1

严格来说，您可以在不清除画布的情况下“修补”画布，但就您而言，我不确定它是您想要的。

这是有关https://www.html5rocks.com/en/tutorials/canvas/performance/和https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations的一些很棒的文章

Answer 2

canvas 2D API使用GPU渲染绘图调用，如今，您可以指望每台具有GPU的设备。

GPU擅长写像素。

在像JavaScript这样的高级语言中，完成调用（如ctx.clearRect()）所需的大量CPU时间都花费在JS引擎中，用于审核，转换参数并通过设备GPU接口准备调用。 / p>

每像素成本

这样的通话...

 ctx.clearRect(0, 0, 500, 500);  // Example A

...将在710µs的时间内清除250,000个像素^（1），速率为352px / µs

但同一个电话...

 ctx.clearRect(0, 0, 10, 10);  // Example B

...将在700µs内清除100个像素，速率为0.17px / µs

通话速度更快，但是如果您比较像素速率，则示例A无疑是赢家。

为了突出JS如何降低速度，下一个清除使用字符串（人们可以这样做）

 ctx.clearRect("0","0", "10", "10");  // Example C

...，耗时1300µs。速率约为0.08px / µs。像素更改速度比示例A慢4400倍。

减少基于GPU的API调用

在JS中，一般规则是减少绘图调用的次数，并让每个调用更改尽可能多的像素

（1） = 1 / 1,000,000秒

为什么总是总是重新绘制整个画布？

2 个答案:

每像素成本

减少基于GPU的API调用