Question

我要做的是单击画布上的某个位置，并在跟踪路径后直接指向我选择的位置。

到目前为止，这是我的代码。

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

现在我所做的就是让点跟随45度角然后点击并按照点击位置的x或y值。我试图使用斜率公式，但我对如何在我的代码中实现它无能为力。

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

Answer 1

您可以使用插值：

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
    }        
}

插值本身就出现在以下几行：

player.x = oldPlayerX + (clickedChords.x - oldPlayerX) * t;
player.y = oldPlayerY + (clickedChords.y - oldPlayerY) * t;

它基本上区分新老位置。 t将确定将多少差异添加到原始位置，即。如果t = 0则没有，如果t = 1则将完全差异添加到旧位置，这显然等于新位置。介于两者之间的任何内容（对于t）将添加一定百分比，允许您为该点设置动画。

requestAnimationFrame允许您将动画同步到监视器刷新。 setInterval值为10 ms是浏览器处理的缩写（对于60 Hz的屏幕刷新，最小值为16.7ms）。

希望这有帮助！

Answer 2

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

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

这是一个小提琴：

http://jsfiddle.net/AniHouse/w2vCc/1/

有一个点跟随路径选择的路径

2 个答案: