如何设置JavaScript路径的动画？

我在做迷宫。关键是要画出路径，而不是仅仅有解决方案。我有JavaScript路径，但当我在页面上使用它时，它已经被绘制出来了

我想动画的整个路径，而不仅仅是有它所有的画出来

以下是我的JavaScript路径：

function path(){
ctx.save();
ctx.fillStyle = "rgba(0, 0, 0, 0)";
ctx.strokeStyle = "blue";
ctx.lineWidth = 5;
ctx.lineCap = "square";
ctx.lineJoin = "round";
ctx.beginPath();
ctx.moveTo(306.26420364278204,3.0891496659235713);
ctx.lineTo(305.28255450186555,43.07710241377171);
ctx.translate(299,298.99999999999994);
ctx.rotate(0);
ctx.scale(1,1);
ctx.arc(0,0,256,-1.5462526341887264,-1.0062913968529807,0);
ctx.scale(1,1);
ctx.rotate(0);
ctx.translate(-299,-298.99999999999994);
ctx.lineTo(444.5193526092904,69.19983025207966);
ctx.translate(299.0000000000001,299.00000000000006);
ctx.rotate(0);
ctx.scale(1,1);
ctx.arc(0,0,272,-1.0062913968529812,-0.8590292412159607,0);
ctx.scale(1,1);
ctx.rotate(0);
ctx.translate(-299.0000000000001,-299.00000000000006);
ctx.lineTo(487.1137787706877,80.92385220613244);
ctx.translate(299.0000000000001,299.00000000000006);
ctx.rotate(0);
ctx.scale(1,1);
ctx.arc(0,0,288,-0.8590292412159597,-0.7117670855789384,0);
ctx.scale(1,1);
ctx.rotate(0);
ctx.translate(-299.0000000000001,-299.00000000000006);
ctx.lineTo(492.84546470566,131.78775220383315);
ctx.translate(298.99999999999864,298.9999999999984);
ctx.rotate(0);
ctx.scale(1,1);
ctx.arc(0,0,256,-0.7117670855789293,-0.7363107781850984,1);
ctx.scale(1,1);
ctx.rotate(0);
ctx.translate(-298.99999999999864,-298.9999999999984);
ctx.lineTo(476.8282700851902,137.82585083671557);
ctx.translate(299,299);
ctx.rotate(0);
ctx.scale(1,1);
ctx.arc(0,0,240,-0.7363107781851078,-0.4417864669110653,0);
ctx.scale(1,1);
ctx.rotate(0);
ctx.translate(-299,-299);
ctx.lineTo(530.4212590396015,189.54589608184776);
ctx.translate(299,298.9999999999997);
ctx.rotate(0);
ctx.scale(1,1);
ctx.arc(0,0,256,-0.4417864669110634,-0.22089323345553116,0);
ctx.scale(1,1);
ctx.rotate(0);
ctx.translate(-299,-298.9999999999997);
ctx.lineTo(580.0022134510962,235.8988428348215);
ctx.translate(299.0000000000002,299.00000000000114);
ctx.rotate(0);
ctx.scale(1,1);
ctx.arc(0,0,288,-0.22089323345553627,-0.12271846303085567,0);
ctx.scale(1,1);
ctx.rotate(0);
ctx.translate(-299.0000000000002,-299.00000000000114);
ctx.lineTo(568.9544334108491,265.7042963458132);
ctx.translate(298.99999999999983,298.9999999999995);
ctx.rotate(0);
ctx.scale(1,1);
ctx.arc(0,0,272,-0.12271846303084974,-0.17180584824318773,1);
ctx.scale(1,1);
ctx.rotate(0);
ctx.translate(-298.99999999999983,-298.9999999999995);
ctx.lineTo(551.2310764515689,255.23375647736285);
ctx.translate(299.00000000000006,299.00000000000074);
ctx.rotate(0);
ctx.scale(1,1);
ctx.arc(0,0,256,-0.1718058482431939,-0.049087385212345055,0);
ctx.scale(1,1);
ctx.rotate(0);
ctx.translate(-299.00000000000006,-299.00000000000074);
ctx.lineTo(522.7301821899587,288.00884095065834);
ctx.translate(299.0000000000001,299.0000000000003);
ctx.rotate(0);
ctx.scale(1,1);
ctx.arc(0,0,224,-0.04908738521234027,-0.24543692606170187,1);
ctx.scale(1,1);
ctx.rotate(0);
ctx.translate(-299.0000000000001,-299.0000000000003);
ctx.lineTo(500.7665006644652,248.4601225801211);
ctx.translate(299.00000000000006,299.0000000000003);
ctx.rotate(0);
ctx.scale(1,1);
ctx.arc(0,0,208,-0.2454369260617036,-0.3436116964863819,1);
ctx.scale(1,1);
ctx.rotate(0);
ctx.translate(-299.00000000000006,-299.0000000000003);
ctx.lineTo(464.7117554722116,239.70738580296927);
ctx.translate(299.0000000000001,299.00000000000045);
ctx.rotate(0);
ctx.scale(1,1);
ctx.arc(0,0,176,-0.3436116964863862,-0.24543692606170558,0);
ctx.scale(1,1);
ctx.rotate(0);
ctx.translate(-299.0000000000001,-299.00000000000045);
ctx.lineTo(423.16400040890164,267.8985369723822);
ctx.translate(299.00000000000006,299);
ctx.rotate(0);
ctx.scale(1,1);
ctx.arc(0,0,128,-0.24543692606170267,-0.44178646691106427,1);
ctx.scale(1,1);
ctx.rotate(0);
ctx.translate(-299.00000000000006,-299);
ctx.lineTo(429.1744582097758,237.43206654603938);
ctx.translate(298.99999999999994,298.99999999999994);
ctx.rotate(0);
ctx.scale(1,1);
ctx.arc(0,0,144,-0.44178646691106416,-0.5399612373357459,1);
ctx.scale(1,1);
ctx.rotate(0);
ctx.translate(-298.99999999999994,-298.99999999999994);
ctx.lineTo(463.68389312005223,200.29227311490143);
ctx.translate(299,298.99999999999994);
ctx.rotate(0);
ctx.scale(1,1);
ctx.arc(0,0,192,-0.5399612373357452,-0.8344855486097881,1);
ctx.scale(1,1);
ctx.rotate(0);
ctx.translate(-299,-298.99999999999994);
ctx.lineTo(417.19437605307525,168.59260193752718);
ctx.translate(299,299);
ctx.rotate(0);
ctx.scale(1,1);
ctx.arc(0,0,176,-0.834485548609789,-1.0308350894591511,1);
ctx.scale(1,1);
ctx.rotate(0);
ctx.translate(-299,-299);
ctx.lineTo(381.25643907091546,161.76342239995645);
ctx.translate(298.9999999999997,298.9999999999998);
ctx.rotate(0);
ctx.scale(1,1);
ctx.arc(0,0,160,-1.0308350894591487,-0.932660319034467,0);
ctx.scale(1,1);
ctx.rotate(0);
ctx.translate(-298.9999999999997,-298.9999999999998);
ctx.lineTo(375.24951097503146,196.18943597047746);
ctx.translate(299.00000000000045,299.0000000000003);
ctx.rotate(0);
ctx.scale(1,1);
ctx.arc(0,0,128,-0.9326603190344739,-0.8835729338221313,0);
ctx.scale(1,1);
ctx.rotate(0);
ctx.translate(-299.00000000000045,-299.0000000000003);
ctx.lineTo(359.90175527970996,224.79099647717726);
ctx.translate(298.99999999999994,298.99999999999994);
ctx.rotate(0);
ctx.scale(1,1);
ctx.arc(0,0,96,-0.8835729338221285,-1.0799224746714902,1);
ctx.scale(1,1);
ctx.rotate(0);
ctx.translate(-298.99999999999994,-298.99999999999994);
ctx.lineTo(329.16939115686387,242.55703908170528);
ctx.translate(299,299);
ctx.rotate(0);
ctx.scale(1,1);
ctx.arc(0,0,64,-1.0799224746714915,-1.3744467859455356,1);
ctx.scale(1,1);
ctx.rotate(0);
ctx.translate(-299,-299);
ctx.lineTo(308.36433545677414,251.92230654064494);
ctx.translate(299,299);
ctx.rotate(0);
ctx.scale(1,1);
ctx.arc(0,0,48,-1.3744467859455347,-0.9817477042468099,0);
ctx.scale(1,1);
ctx.rotate(0);
ctx.translate(-299,-299);
ctx.lineTo(316.77824745662724,272.39297240631856);
ctx.translate(298.99999999999994,299);
ctx.rotate(0);
ctx.scale(1,1);
ctx.arc(0,0,32,-0.9817477042468098,0.9817477042468098,0);
ctx.scale(1,1);
ctx.rotate(0);
ctx.translate(-298.99999999999994,-299);
ctx.lineTo(325.6673711849409,338.91054139052216);
ctx.translate(299,299);
ctx.rotate(0);
ctx.scale(1,1);
ctx.arc(0,0,48,0.9817477042468107,1.374446785945534,0);
ctx.scale(1,1);
ctx.rotate(0);
ctx.translate(-299,-299);
ctx.lineTo(311.48578060903225,361.77025794580675);
ctx.translate(299,299);
ctx.rotate(0);
ctx.scale(1,1);
ctx.arc(0,0,64,1.3744467859455345,1.7671458676442582,0);
ctx.scale(1,1);
ctx.rotate(0);
ctx.translate(-299,-299);
ctx.lineTo(289.63566454322586,346.07769345935503);
ctx.translate(298.9999999999998,298.99999999999994);
ctx.rotate(0);
ctx.scale(1,1);
ctx.arc(0,0,48,1.7671458676442546,2.1598449493429785,0);
ctx.scale(1,1);
ctx.rotate(0);
ctx.translate(-298.9999999999998,-298.99999999999994);
ctx.lineTo(263.44350508674546,352.21405518736293);
ctx.translate(299.00000000000045,299.00000000000034);
ctx.rotate(0);
ctx.scale(1,1);
ctx.arc(0,0,64,2.1598449493429923,2.2580197197676717,0);
ctx.scale(1,1);
ctx.rotate(0);
ctx.translate(-299.00000000000045,-299.00000000000034);
ctx.lineTo(238.09824472029004,373.20900352282274);
ctx.translate(299,299);
ctx.rotate(0);
ctx.scale(1,1);
ctx.arc(0,0,96,2.258019719767664,2.061670178918302,1);
ctx.scale(1,1);
ctx.rotate(0);
ctx.translate(-299,-299);
ctx.lineTo(246.20356547548826,397.7751816070158);
ctx.translate(299.00000000000017,299.0000000000001);
ctx.rotate(0);
ctx.scale(1,1);
ctx.arc(0,0,112,2.0616701789183036,2.2580197197676646,0);
ctx.scale(1,1);
ctx.rotate(0);
ctx.translate(-299.00000000000017,-299.0000000000001);
ctx.lineTo(217.7976596270534,397.9453380304303);
ctx.translate(299,298.99999999999994);
ctx.rotate(0);
ctx.scale(1,1);
ctx.arc(0,0,128,2.2580197197676632,2.454369260617024,0);
ctx.scale(1,1);
ctx.rotate(0);
ctx.translate(-299,-298.99999999999994);
ctx.lineTo(212.4228292233735,370.05204782632836);
ctx.translate(299,299);
ctx.rotate(0);
ctx.scale(1,1);
ctx.arc(0,0,112,2.4543692606170255,3.8288160465625607,0);
ctx.scale(1,1);
ctx.rotate(0);
ctx.translate(-299,-299);
ctx.lineTo(249.52733098478484,258.3988298135267);
ctx.translate(299,299);
ctx.rotate(0);
ctx.scale(1,1);
ctx.arc(0,0,64,-2.454369260617026,-2.5525440310417076,1);
ctx.scale(1,1);
ctx.rotate(0);
ctx.translate(-299,-299);
ctx.lineTo(272.39297240631856,281.22175254337276);
ctx.translate(299.00000000000006,299);
ctx.rotate(0);
ctx.scale(1,1);
ctx.arc(0,0,32,-2.5525440310417085,-4.319689898685965,1);
ctx.scale(1,1);
ctx.rotate(0);
ctx.translate(-299.00000000000006,-299);
ctx.lineTo(289.81559762323786,321.17310878027087);
ctx.fill();
ctx.stroke();
ctx.restore();
}

---

你为什么不试试这样的东西：

function animatePath() {
    setTimeout(function () {
        drawPathStep();
        animatePath();
    }, 1000);
}

---

其中

drawPathStep

是一个函数，用于绘制路径的一个步骤，可能是从JSON数组中获取数据？

这不是一个最小且可重复的示例。更新示例中的代码。这是可能的（而且很容易），但在我们帮助您之前，您需要更多的指导。要使路径的移动部分可见还是绘制不断增长的长度？您可能希望在坐标数组上循环。除了方向，这里实际上不接受工单。可能尝试自己制作动画，当/如果不起作用时返回。

setInterval

的存在可简化此过程。无需在每次调用函数时设置计时器-设置一次间隔并使函数保持简短。