Wie animiere ich meinen JavaScript-Pfad?

Question

Ich mache ein Labyrinth. Der Punkt ist, den Weg zu ziehen, anstatt nur die Lösung zu haben. Ich habe den JavaScript-Pfad, aber wenn ich es auf meiner Seite verwende, ist es bereits gezeichnet.

Ich möchte den gesamten Weg animieren, nicht nur alles herausgezogen haben.

Hier ist mein JavaScript Pfad:

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(); 
} 

Answer 1

Warum versuchen Sie nicht so etwas wie dieses:

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

Wo drawPathStep ist eine Funktion, die einen Schritt des Weges zieht, vielleicht bekommen Daten von einem JSON-Array?