为何Canvas中仅含多个同类型对象时ctx.resetTransform()失效？

核心问题：循环变量全局污染导致逻辑混乱 #

你在render函数的两层for循环里，使用的i和ii没有用let或const声明，这俩变量直接变成了全局作用域的变量。

因为你用setInterval每隔50ms调用一次render，如果render执行时间超过50ms（比如绘制多个带多帧精灵的对象），就会出现多个render实例同时运行的情况，它们会共享全局的i和ii：

• 某个对象的精灵绘制到一半，变量被另一个render实例修改，导致ctx.resetTransform()没在预期时机执行；
• 未重置的变换会被叠加到后续绘制的对象上，看起来就像是resetTransform失效了。

为什么添加bullet后问题消失？ #

bullet的精灵只有1个元素，绘制耗时更短，render能更快执行完成，减少了多实例同时运行的概率；同时不同对象的精灵长度不同，循环变量的变化逻辑改变，巧合下避开了全局变量冲突的异常，但这只是临时现象，根本问题没解决。

其他潜在隐患 #

• ctx变量未声明，属于全局变量，会增加代码不可预测性；
• e.create里的crr变量也没声明，同样存在全局污染风险。

内容的提问来源于stack exchange，提问作者Kath Aroet