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

Question

我正在制作一个帆布游戏，我想知道如何在没有明显性能的情况下绘制数百张图像？我读了一个'屏幕外'画布来做一些作品，所以我补充说。但它似乎没有提高性能。

以下是效果图表：

这是一些伪代码：

.AllowUserInteraction

以下是在此屏幕上运行的许多字符的示例（画布的小部分。它在gif外部也运行得更顺畅）

我可以做些什么来提高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(); }); 和clearRect的效果？

切入点：
https://github.com/TheColorRed/blueberry/blob/master/src/main.ts

引擎核心：
https://github.com/TheColorRed/blueberry/blob/master/src/core/Engine.ts

驯鹿：
https://github.com/TheColorRed/blueberry/blob/master/src/core/Stage.ts