Javascript HTML5画布：千幅动态图像=巨大的FPS损失

我正在尝试用Canvas2D构建一个HTML5游戏（仅适用于计算机作为设备）。但有一个问题，我有数千张运动图像，大约有4000多张图像（敌人），我的帧速不会超过10帧。有了Java2D，它工作得很好，现在我正试图将游戏导入HTML5。有没有人在HTML5中有一些技巧来实现这一点？一些代码优化？如果有任何帮助，我将不胜感激

---

ctx.clearRect（0,0320320）；// 首先，@enhzflep在评论中已经提到了一些好的想法

我想补充一点，设置填充样式是一个有点昂贵的操作，因此设置每个4000个敌人绘制的填充样式变得非常昂贵。我建议您只需每秒显示一次文本和健康信息，而不是在每次更新时显示

在我的开发速度适中的桌面上，我可以以每秒45次的速度绘制4000 X drawImage（img，0,0）。这让我相信变换（平移、旋转）正在减慢速度。也许可以创建4个版本的敌人形象——面朝上、向下、向左和向右。然后通过绘制适当的正面图像完全替换变换

我看到您正在使用
delete Enemys\u P1[I]
。“回收”现有敌人更有效。您可以通过将敌人标记为“不活动”而不处理该敌人来实现这一点。当你需要一个新的敌人时，你可以将一个不活动的敌人改为“活动”，并将其属性设置为“新”敌人值

祝你的项目好运
 我看到了一些ctx.save和ctx.restore的实例，但它们之间没有任何内容，我注意到它们可以利用这些内容。我还注意到，每个敌人都加载了相同的图像。当然，浏览器会缓存下载的内容，但我不确定它是否会缓存解码后的图像，因此：您正在为每个敌人解码（相同）图像。最后，您是否打算每秒调用
Update\u Map1
100次？只是忘了删除本文的save&restore实例，原始代码之间存在一些差异。只解码一次图像是个好主意，谢谢。10毫秒的间隔仅用于测试，大约17毫秒对于60 FPS是正常的。非常感谢。有几件事：1）通过使用requestAnimationFrame，您将立即获得平滑度，因为当视频缓冲区不可用时，setInterval可能会滴答作响，从而增加进一步的延迟。2） 在精确测量性能时，请确保不要使用console.log。您可能更愿意输入文本值以获得更小的性能影响。3） 将所有常用的常量字符串一次性存储在vars中（“#000”=黑色，…），因为您正在创建可以轻松避免的垃圾（这里是2*fps*字符串长度*每秒敌方计数字节=4MB）。4） 不要使用delete，而是使用“alive”标志。1。是的，当然，通常我用rAF，idk为什么我把它改成计时器。还有一个问题，这是一个多人游戏，我不希望敌人在任何人更改标签或最小化浏览器时停止。2.当我测试某样东西时，我会把它注释掉，只是这一次，但是谢谢3。这很简单，但从没想过，谢谢你，伙计！4.什么是活旗？@游戏炼金术士：谢谢你的提示。好吧，那很糟糕，但没关系。我希望如此。。4）现在知道了，谢谢！只显示一次文本就足够了。但是显示一次健康信息是不够的，那么它就不会固定在敌人身上，它更像是一个滞后的健康条。创建一个以上的图像也是一个好主意，也许只是一个精灵。如何将某些内容设置为非活动？把它藏起来，别再动了？非常感谢。这样做的目的是不经常更改上下文状态。也许可以创建第二个小画布，只显示文本和运行状况，并将第二个画布覆盖在主画布上。要回收对象，只需向对象添加“isActive”属性。如果isActive==true，则绘制对象，否则不绘制。干杯是的，几个小时前我做了这个，两个画布相互覆盖，背景、按钮和文本都在一个没有被重画的画布上。所以敌人永远不会停止，但isActive var对死去的敌人是有用的，谢谢。
ctx.clearRect(0, 0, 320, 320); // <- Maybe just Clear the Enemy Square Position?