我有一个HTML5动画，它使用尺寸为900x520的画布。然而，在最一般的情况下，约60％的画布未被使用。如果动画的某些参数不同，则使用整个画布，这就是我将最大画布大小固定为W:900px和H:520px的原因。
当用户使用此HTML5画布打开页面时，会考虑一般情况，并且仅使用HTML5画布中心的280x280。据我所知，虽然我没有使用其他60％的画布但没有使用，但每次渲染都会导致动画速度减慢，尤其是在平板电脑和手机上（我的大多数用户都是平板电脑/移动用户。所以，我想知道是否有任何技术每次只渲染一组像素（比如画布中心的300x300）？是否有解决方案？
我已经在使用RequestAnimationFrame（但是，我想要更多优化）
答案 0 :(得分：0)
我要尝试的第一件事是使用clip（）函数。它会减慢绘图速度，但在您的情况下，首先检查剪辑可能会更快，因为裁剪将退出绘图的时间为60％。
要尝试的第二件事是自己处理剪裁：处理视口对象（中心x，中心y，宽度，高度）并使用简单的边界框测试排除看不见的对象。 Rq：也许绘制场景的方式可以轻松优化。
3）不要定义比屏幕大的画布：而是将其定义为最大尺寸，并跟踪偏移，就像使用viewPort对象一样。为避免重写所有绘图代码，只需在旧方法之前/之后使用save / translate / restore。有关此画布上的剪辑，请参阅1）： - ）
4）你可以通过使用css缩放减少移动设备上的图形应变。即使缩放降低了性能，在移动设备上使用css比例绘制较小的画布比绘制没有比例的全分辨率更快。
因此，您必须将canvas.style.width和canvas.style.height设置为某些明智的值，并且可以将canvas.width和canvas.height设置为允许正确性能的设置。