Javascript 使用clearRect和drawImage时增强画布性能

我正在制作一个画布游戏，我想知道如何在没有明显表现的情况下绘制数百幅图像？我读书是为了制作一个“屏幕外”画布来完成一些作品，所以我加了这个。但它似乎并没有提高性能

以下是性能图表：

下面是一些伪代码：

function tick(){
    // Run updates to update positions, rotations, scales, etc.
    update();
    // Run render
    render();
}

function render(){
    bufferContext.clearRect(0, 0, canvas.width, canvas.height);
    gameobjects.forEach(item => {
        bufferContext.drawImage(img, x, y, width, height, cx, cy, width, height);
    });

    context.clearRect(0, 0, canvas.width, canvas.height);
    context.drawImage(bufferCanvas, 0, 0);
    requestAnimationFrame(tick);
}

window.addEventListener('load', function(){
    tick();
});

下面是一个在这个屏幕上运行的许多字符的示例（画布的一小部分。它在gif之外也运行得更平滑）

如何提高

clearRect

和

drawImage

的性能

入口点：

发动机芯：

订阅者：

---

Html5画布已经缓冲了自身，因此缓冲整个画布不是必需的，也不是可取的。

context.drawImage

命令是一个黑匣子，非常接近金属，因此无法直接提高其性能。相反（如果可能），减少

drawImage

调用的次数。因此，如果一组游戏对象彼此之间的相对位置不变（即使是暂时的几次），那么您可以将该组游戏对象缓存到另一个画布上，并将该较大的组合集绘制到显示画布上。了解计时数据需要重要信息。调用drawImage的次数，正在绘制的画布和img的分辨率，如何调用勾号？看起来您正在使用Chrome。Chrome不喜欢forEach，它比for或while循环慢2-3倍。我已经用一张精灵表图像进行了测试，我为运行动画的角色显示了其中的一部分。然后，如果项目不在画布视图中，我也不会绘制它。我认为这将有助于优化它。我在画布上有大约500-600个不同的项目，每个项目都有一个运动（见附件gif）。我还以一个窗口加载事件开始打勾，我已经添加到代码中。其中一些像素每帧必须绘制5次或更多次。也许可以通过某种隐藏表面的移除来加快速度。