Javascript 优化HTML5动画

我有一个HTML5动画，使用大小为900x520的画布。然而，在大多数情况下，约60%的画布未被使用。如果动画的某些参数发生变化，则会使用整个画布，这就是我将最大画布大小固定为

W:900px

和

H:520px

的原因

当用户使用此HTML5画布打开页面时，将考虑一般情况，并且仅使用HTML5画布中心的280x280。据我所知，虽然我没有使用其他60%的画布，但没有使用，但每次都会渲染，这会导致动画速度减慢，尤其是在平板电脑和手机上（我的大多数预期用户是平板电脑/手机用户）。所以，我想知道是否有任何技术每次只渲染一组像素（比如画布中心的300x300）？有什么解决办法吗

---

我已经在使用

RequestAnimationFrame

（不过，我还需要一些优化）

我要尝试的第一件事是使用clip（）函数。这会减慢绘图速度，但在您的情况下，可能会更快地首先检查剪辑，因为剪辑有60%的时间会退出绘图

尝试的第二件事是自己处理剪裁：处理视口对象（中心x、中心y、宽度、高度），并通过简单的边界框测试排除看不见的对象。Rq：也许你绘制场景的方式允许轻松优化

3） 不要定义比屏幕大的画布：而是以最大大小定义画布，并跟踪偏移，就像使用视口对象一样。为了避免重新编写所有绘图代码，只需在旧方法之前/之后使用save/translate/restore。有关此画布上的剪辑，请参阅1）：-）

4） 通过使用css缩放，您可以减少移动设备上的图形压力。即使缩放会降低性能，在手机上，使用css缩放在更小的画布上绘制也比不使用缩放绘制全分辨率要快。

---

因此，您必须将canvas.style.width和canvas.style.height设置为一些明智的值，并且可以将canvas.width和canvas.height设置为允许正确性能的设置。

您不能调整画布的大小吗？我已将900x520设置为固定大小，并将动画放置在中间。我的动画依赖于某些数学方程，这些方程被转换为像素（基于我的画布大小900x520）以获得适当的动画效果，因此我可能无法调整画布的大小！！！几乎不可能帮助优化我们没有看到的代码，但一般来说，您可以通过重新绘制画布的最小区域来优化画布绘制——只重新绘制已更改的部分，而不是整个画布。我建议使用两个画布。将工作画布（应隐藏在视图中）设置为尺寸900 x 520，并在其上完成所有绘图工作。将第二个可见画布设置为所需尺寸，例如300 x 300，并显示它。在每个动画标记结束时，使用canvas drawImage（）函数将不可见画布复制到可见画布上