如何让箭头在画布上移动？

Question

我需要按以下顺序设置箭头1-5的动画（请参阅附图）

例如：箭头1 将从第1点移至第2点，然后第2箭头将从点2 到点3 ......直到箭头5。

this accepted answer

请参阅： 我只需要通过JQuery和HTML5 canvas使用。我希望有人可以帮助我。这对我来说当然很复杂，因为我没有JQuery动画方面的专业知识。我不知道从哪里开始，我已经坚持了3个星期，我似乎无法得到适当的参考。提前感谢您的帮助。

Answer 1

你花了3个星期来完成这项任务......哎哟！

这是一个分步教程，展示了如何管理它。

由于您处于学习模式，我会留下一个演示，以便您可以通过组装这些作品来学习。我也把箭尾留给你作为学习经历。祝你的项目好运！

计算关于P1和＆amp;之间路径的一些有用值。 P2

创建积分P1＆amp; P2，您想要沿箭头线设置动画：

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

计算deltaX＆amp; deltaY代表起始＆amp;之间的向量。当前路径的终点（P1到P2）：

// calculate the deltaX & deltaY of the 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;

计算P1＆amp;之间路径的长度。 P2：

var pathLength=Math.sqrt(dx*dx+dy*dy);

计算P1＆amp;之间路径的角度。 P2：

var pathAngle=Math.atan2(dy,dx);

定义一个变量，用于指示P1和P1之间路径的距离。 P2箭头线已移动

// pct will be incremented from 0 to 100
// At 100 the arrow-line will have its arrowhead at P2
var pct=0;

定义箭头线的长度：

var arrowLineLength=25;

定义箭头的长度：

var arrowLength=8;

在动画循环中：

您可以使用requestAnimationFrame

创建动画循环

function animate(time){

    // Recalculate your animation values
    // In your case, recalculate the new starting & ending points 
    //     of the arrow as it animates from P1 to P2

    // Draw your arrow-line in it's newly animated position

    // request another loop in the animation
    requestAnimationFrame(animate);
}

计算当前的起始＆amp;箭头线的终点

// calculate how far the line has already animated
// shorten the distance by the length used by the arrowLine
var traveled=(pathLength-arrowLineLength)*pct/100;

// calculate the new starting point of the 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 the new ending point of the 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};

清除整个画布：

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

重新划分新的[x0，y0]，[x1，y1]位置：

（参见下面的函数，其中显示了如何绘制arrowLine）

drawLineWithArrowhead(lineStart,lineEnd,arrowLength);

增加动画中下一个循环的pct

pct++;

完成P1和＆之间的动画制作时P2（当pct == 100时）......

回到第一组指令并计算关于P2和＆amp;之间路径的有用值。 P3。

如何在2点之间绘制箭头线：

（有关演示，请参阅上一个答案here）

function drawLineWithArrowhead(p0,p1,headLength){

  // constants (could be declared as globals outside this function)
  var PI=Math.PI;
  var degreesInRadians225=225*PI/180;
  var degreesInRadians135=135*PI/180;

  // calc the angle of the 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 the line from p0 to p1
  ctx.moveTo(p0.x,p0.y);
  ctx.lineTo(p1.x,p1.y);
  // draw partial arrowhead at 225 degrees
  ctx.moveTo(p1.x,p1.y);
  ctx.lineTo(x225,y225);
  // draw partial arrowhead at 135 degrees
  ctx.moveTo(p1.x,p1.y);
  ctx.lineTo(x135,y135);
  // stroke the line and arrowhead
  ctx.stroke();
}