Javascript 让一个点沿着一条选定的路径

我试图做的是单击画布上的一个位置，让一个点沿着路径直接指向我选择的位置

这是到目前为止我的代码

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var rect = canvas.getBoundingClientRect()
//
var clickedChords = {
x: 0,
y: 0
};
var player = { 
x: 100, 
y: 100
};

canvas.addEventListener("mousedown", getChords, false);        

function getChords(e) {

  clickedChords.x = e.pageX - rect.left;
  clickedChords.y = e.pageY - rect.top; 

}

function draw() { 
 ctx.clearRect(0,0,canvas.width,canvas.height); 

 ctx.fillStyle= 'black';
 ctx.beginPath();
 ctx.arc(clickedChords.x,clickedChords.y,3,0,360);
 ctx.arc(player.x,player.y,3,0,360);   
 ctx.fill();

 if(player.x > clickedChords.x && player.x !== clickedChords.x){     
     player.x -= 1;  
 }  
 if(player.x < clickedChords.x && player.x !== clickedChords.x){ 
     player.x += 1;     
 }
 if(player.y < clickedChords.y && player.y !== clickedChords.y){  
     player.y += 1;
 } 
 if(player.y > clickedChords.y && player.y !== clickedChords.y){  
     player.y -= 1;
 }

 }setInterval(draw, 10);

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var rect=canvas.getBoundingClientRect（）
//
var clicked和弦={
x:0,，
y:0
};
变量player={
x:100，
y:100
};
canvas.addEventListener（“mousedown”，getchord，false）；
函数getChords（e）{
单击和弦.x=e.pageX-rect.left；
单击和弦.y=e.pageY-rect.top；
}
函数draw（）{
clearRect（0,0，canvas.width，canvas.height）；
ctx.fillStyle='黑色'；
ctx.beginPath（）；
ctx.arc（clickedChords.x，clickedChords.y，3,0360）；
ctx.arc(player.x,player.y,3,0360),；
ctx.fill（）；
如果（player.x>clickedChords.x&&player.x！==clickedChords.x）{
player.x-=1；
}  
如果（player.xclickedChords.y&&player.y！==clickedChords.y）{
player.y-=1；
}
}设置间隔（抽签，10）；

现在我所能做的就是让圆点跟随45度角，然后点击并跟随我点击位置的x或y值。我曾尝试使用斜率公式，但我不知道如何在代码中实现它

---

感谢您的帮助，因为我真的被卡住了。

您可以使用插值：

var t = 0,                 // will be in range [0.0, 1.0]
    oldPlayerX,            // need these for interpolation
    oldPlayerY;

function getChords(e) {
    clickedChords.x = e.pageX - rect.left;
    clickedChords.y = e.pageY - rect.top; 

    oldPlayerX = player.x, // copy these as we need them as-is
    oldPlayerY = player.y;

    draw();
}

function draw() { 

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

    ctx.fillStyle= 'black';
    ctx.beginPath();
    ctx.arc(clickedChords.x,clickedChords.y,3,0,360);
    ctx.arc(player.x,player.y,3,0,360);   
    ctx.fill();

    if (t <= 1) {
        player.x = oldPlayerX + (clickedChords.x - oldPlayerX) * t;
        player.y = oldPlayerY + (clickedChords.y - oldPlayerY) * t;
        t += 0.05;                   // determines speed
        requestAnimationFrame(draw); // use this instead of setInterval
    }        
}

它基本上在新旧位置之间做了区别

t

将确定在原始位置上增加了多少差值，即，如果t=0，则什么都没有；如果t=1，则将全部差值添加到旧位置，这显然等于新位置。介于两者之间的任何内容（对于

t

）都将添加一个百分比，使您能够设置点的动画

requestAnimationFrame

允许您将动画同步到监视器刷新。10毫秒的设置间隔值是浏览器处理的最短方式（对于60赫兹的屏幕刷新，最小值为16.7毫秒）

---

希望这有帮助

我们可以使用一些基本的三角函数：

var angle = Math.atan2(clickedChords.y - player.y, clickedChords.x - player.x);  
player.x += Math.cos(angle);
player.y += Math.sin(angle);

这是一把小提琴：

---

虽然有一个更简单的解决方案，但您的答案没有错。@SpencerWieczorek两行代码还不够简单吗？：）其余部分用于集成到他的代码中。它比三角学更快，因为与+/*相比，atan2/cos/sin是相对昂贵的方法。您可以缓存这些值，但最终会得到更多代码。只是说。。

var angle = Math.atan2(clickedChords.y - player.y, clickedChords.x - player.x);  
player.x += Math.cos(angle);
player.y += Math.sin(angle);