Javascript获取动画以跟随路径并保存画布状态

基本的

主要目标是让企鹅沿着直线向右走，然后向左后退。一般来说，我需要它沿着正确的方向走，但是对于这个基本的例子，我只需要弄清楚这一点，我可以将它扩展到我的路径。如图所示，路径的设置类似于坐标数组，如

[{x:n，y:m}]

。我还需要

penguin\u wrap

作为承诺，因为它在我的代码中与

wait

一起使用，但我似乎遇到的一个大问题是，当我运行代码时，行被擦除，企鹅运行。在小提琴中，由于某种原因，它没有被复制，所以只要我能想出如何正确地移动它，我就应该能够想出它

我有这张照片，显示它沿着一条路径行走，但当画布被画在下面时，我似乎无法应用它。请注意，我需要保存画布的状态，因为首先要设置一条线的动画（使用request animationframe和lineTo），而这条线是无法擦除的。企鹅需要沿着线路（路径）行走

---

谢谢

您当然看到了错误….

TypeError:resolve不是一个函数

penguin\u right.onload=resolve

因为您希望onload获得一个函数，而不是立即调用函数的结果，然后您将遇到未定义的

上下文的问题，因为finalArr是
[context，[array of points]]]
，而reduce方法不知道这一点，一旦您解决了这个问题，然后，
frame
是
未定义的
，您的第二把小提琴。。。最终得到
TypeError:path[（counter+1）]是未定义的
-只要您使用brwoser开发者工具控制台，就可以轻松调试这些东西：pwas，如果（++frame）%4>0）返回requestAnimationFrame（runAnimation），则应该是