Javascript 如何使画布元素到达画布的中心

我用随机位置的圆弧填充画布，但现在我希望它们移动到画布的中心，但它们只是跳到画布的中心，而不是慢慢移动到中心。 这条路到目前为止

<canvas id="myCanvas"></canvas>
<script>
    var myCanvas = document.getElementById("myCanvas");
    var c = myCanvas.getContext("2d");
    myCanvas.style.backgroundColor = "#000";
    myCanvas.width = 600;
    myCanvas.height = 600;
    var myArr = [];
    var firstCircle;

    function Circledraw(x, y, r) {
        this.x = x;
        this.y = y;
        this.r = r;

        this.draw = function() {
            c.beginPath();
            c.arc(this.x, this.y, this.r, 0, Math.PI * 2);
            c.fillStyle = "#fff";
            c.fill();
        }

        this.update = function() {
            this.x = myCanvas.clientWidth/2;
            this.y = myCanvas.clientHeight/2;
        }

    }

    for(var i =0; i < 10; i++){
        var x = Math.random() * myCanvas.clientWidth;
        var y = Math.random() * myCanvas.clientHeight;
        var r = 20;
        firstCircle = new Circledraw(x, y, 20);
        firstCircle.draw();
        myArr.push(firstCircle);
    }

    setInterval(circleFall, 1000);

    function circleFall() {
        c.clearRect(0,0, myCanvas.clientWidth, myCanvas.clientHeight);
        for(var z =0; z < myArr.length; z++){
            myArr[z].update();
            firstCircle.draw();
        }

    }


</script>

var myCanvas=document.getElementById（“myCanvas”）；
var c=myCanvas.getContext（“2d”）；
myCanvas.style.backgroundColor=“#000”；
myCanvas.width=600；
myCanvas.height=600；
var myArr=[]；
第一圈；
函数循环图（x，y，r）{
这个.x=x；
这个。y=y；
这个。r=r；
this.draw=函数（）{
c、 beginPath（）；
c、 弧（this.x，this.y，this.r，0，Math.PI*2）；
c、 fillStyle=“#fff”；
c、 填充（）；
}
this.update=函数（）{
this.x=myCanvas.clientWidth/2；
this.y=myCanvas.clientHeight/2；
}
}
对于（变量i=0；i<10；i++）{
var x=Math.random（）*myCanvas.clientWidth；
var y=Math.random（）*myCanvas.clientHeight；
var r=20；
firstCircle=新的Circledraw（x，y，20）；
firstCircle.draw（）；
迈尔推（第一圈）；
}
设置间隔（圆圈，1000）；
函数circleFall（）{
c、 clearRect（0,0，myCanvas.clientWidth，myCanvas.clientHeight）；
对于（var z=0；z

我该如何解决这个问题

编辑：

var canvas=document.getElementById（“myCanvas”）；var c=canvas.getContext（“2d”）；
画布宽度=600；
帆布高度=600；
canvas.style.backgroundColor=“#e74c3c”；
函数向量（x，y，r）{
这个.x=x；
这个。y=y；
这个。r=r；
var centerX=canvas.width/2；
var centerY=canvas.height/2；
var diffX=centerX-this.x；
var diffY=centerY-this.y；
变量角度=数学参数（diffY，diffX）；
无功转速=1；
变量向量={
x：数学cos（角度）*速度，
y：数学。正弦（角度）*速度
}
this.draw=函数（）{
c、 beginPath（）；
c、 弧（this.x，this.y，this.r，0，Math.PI*2）；
c、 fillStyle='#fff'；
c、 填充（）；
}
this.update=函数（）{
这个.x+=vector.x；
这个.y+=vector.y；
}
}
var newCircle=新向量（90100,10）；
函数animate（）{
window.requestAnimationFrame（动画）；
c、 clearRect（0，0，canvas.width，canvas.height）；
newCircle.update（）；
newCircle.draw（）；
}
制作动画（）；

---

第一条弧是用坐标而不是随机位置放置的，但它不会向中心移动。

我的画布。clientWidth/2和

myCanvas。clientHeight/2

将始终返回相同的结果，在这种情况下，画布的中心点

更好的方法是使用基于原点和中心之间角度的向量-类似于：

var diffX = myCanvas.width / 2 - this.x,
    diffY = myCanvas.height / 2 - this.y,
    angle = Math.atan2(diffY, diffX),
    speed = 1;

var vector = {
  x: Math.cos(angle) * speed,
  y: Math.sin(angle) * speed
};

然后在更新方法中将向量添加到位置：

this.update = function() {
  // todo add some checks here to see if it's close enough to center
  this.x += vector.x;
  this.y += vector.y;
}

将其与

requestAnimationFrame（）

结合使用，而不是使用

setInterval（）

也会使动画平滑

var myCanvas=document.getElementById（“myCanvas”）；
var c=myCanvas.getContext（“2d”）；
myCanvas.style.backgroundColor=“#000”；
myCanvas.width=600；
myCanvas.height=600；
var myArr=[]；
第一圈；
函数循环图（x，y，r）{
这个.x=x；
这个。y=y；
这个。r=r；
var cx=myCanvas.width/2，
cy=myCanvas.height/2，
diffX=cx-这个.x，
diffY=cy-this.y，
角度=数学atan2（diffY，diffX），
速度=1；
var公差=2；
变量向量={
x：数学cos（角度）*速度，
y：数学。正弦（角度）*速度
};
this.update=函数（）{
如果（！（this.x>cx-公差&&this.xcy-公差（&this.y
非常感谢，它很有魅力。我甚至没有想到这种方法。干杯但是角度的问题，比如你用过的cos，sin，你是怎么做到的，我正试图找出解决的方法，没问题。它只是一个三角函数，用来找到当前点和中心之间的角度，用它们之间的差值作为atan2的初始向量。然后使用Sin和cos来查找相对于矢量表示的角度的步长值。然后速度基本上变成了cos/sin的“半径”，或者这里：每帧步数，所以点沿着那条看不见的线移动。谢谢，我尝试了你的代码，但是现在圆弧在画布中随机移动，但没有被拉到中心，即使在检查了它们何时到达画布的中心后，但由于随机路径，它们几乎没有接触到画布center@tankit88由于它们具有位置的浮点值，因此必须在检查中添加边距/公差（也取决于速度）。让我再举一个例子。你也可以用线性插值代替矢量。非常感谢你的时间和努力，这就是我想要的。再次感谢：）
this.update = function() {
  // todo add some checks here to see if it's close enough to center
  this.x += vector.x;
  this.y += vector.y;
}