javascript - How to make an arrow move across the canvas? -

i need animate arrow 1-5 in following order (please see attached image)

eg: arrow 1 move point 1 point 2 arrow 2 move point 2 point 3 ... until arrow 5.

please see: i required use through jquery , html5 canvas. hope here can me this. it's complex me have no expertise in jquery animation. have no idea start, i've been stuck on 3 weeks , can't seem proper reference. appreciate in advance.

you've spent 3 weeks fighting task...ouch!

here's step-by-step tutorial showing how manage it.

since you're in learning mode, leave out demo can learn assembling pieces. leave arrow-tail learning experience. luck project!

calculate useful values path between p1 & p2

create points p1 & p2 want animate arrow-line along:

var p1={x:0, y:100}; var p2={x:100, y:0}; 

calculate deltax & deltay representing vector between starting & ending points of current path (p1 p2):

// calculate deltax & deltay of line between point p1 & p2 var pathstarts={ x:p1.x, y:p1.y }; var pathends={ x:p2.x, y:p2.y }; var dx=pathends.x-pathstarts.x; var dy=pathends.y-pathstarts.y; 

calculate length of path between p1 & p2:

var pathlength=math.sqrt(dx*dx+dy*dy); 

calculate angle of path between p1 & p2:

var pathangle=math.atan2(dy,dx); 

define variable tell how far along path between p1 & p2 arrow-line has moved

// pct incremented 0 100 // @ 100 arrow-line have arrowhead @ p2 var pct=0; 

define how long arrow-line be:

var arrowlinelength=25; 

define how long arrowhead be:

var arrowlength=8; 

in animation loop:

you can create animation loop using requestanimationframe

function animate(time){      // recalculate animation values     // in case, recalculate new starting & ending points      //     of arrow animates p1 p2      // draw arrow-line in it's newly animated position      // request loop in animation     requestanimationframe(animate); } 

calculate current starting & ending points of arrow-line

// calculate how far line has animated // shorten distance length used arrowline var traveled=(pathlength-arrowlinelength)*pct/100;  // calculate new starting point of arrow-line var x0=pathstarts.x+traveled*math.cos(pathangle); var y0=pathstarts.y+traveled*math.sin(pathangle); var linestart={x:x0,y:y0};  // calculate new ending point of arrow-line var x1=pathstarts.x+(traveled+arrowlinelength)*math.cos(pathangle); var y1=pathstarts.y+(traveled+arrowlinelength)*math.sin(pathangle); var lineend={x:x1,y:y1}; 

clear entire canvas:

ctx.clearrect(0,0,canvas.width,canvas.height); 

redraw line in it's new [x0,y0],[x1,y1] position:

(see function below shows how draw arrowline)

drawlinewitharrowhead(linestart,lineend,arrowlength); 

increase pct next loop in animation

pct++; 

when finish animating between p1 & p2 (when pct==100)...

go first set of instructions , calculate useful values path between p2 & p3.

how draw arrow-line between 2 points:

(see previous answer here demo)

function drawlinewitharrowhead(p0,p1,headlength){    // constants (could declared globals outside function)   var pi=math.pi;   var degreesinradians225=225*pi/180;   var degreesinradians135=135*pi/180;    // calc angle of line   var dx=p1.x-p0.x;   var dy=p1.y-p0.y;   var angle=math.atan2(dy,dx);    // calc arrowhead points   var x225=p1.x+headlength*math.cos(angle+degreesinradians225);   var y225=p1.y+headlength*math.sin(angle+degreesinradians225);   var x135=p1.x+headlength*math.cos(angle+degreesinradians135);   var y135=p1.y+headlength*math.sin(angle+degreesinradians135);    // draw line plus arrowhead   ctx.beginpath();   // draw line p0 p1   ctx.moveto(p0.x,p0.y);   ctx.lineto(p1.x,p1.y);   // draw partial arrowhead @ 225 degrees   ctx.moveto(p1.x,p1.y);   ctx.lineto(x225,y225);   // draw partial arrowhead @ 135 degrees   ctx.moveto(p1.x,p1.y);   ctx.lineto(x135,y135);   // stroke line , arrowhead   ctx.stroke(); }