Javascript 将画布圆弧移向鼠标

现在我有一个简单的canvas元素，它的函数可以创建任意颜色、大小和圆弧（圆）的位置

生成这些随机圆的随机位置的“for”循环每100毫秒执行一个圆（这在单击时完成）

我想知道如何使每个圆慢慢靠近光标，然后跟随光标移动到任何地方。

---

您可以尝试以下方法：

var MAXIMUM_AMOUNT = 1000,
    FPS = 30,
    targetToGo,     //
    shapes = [];    //storage of circles

//Helper class
function CircleModel(x,y,r,color){
    this.x = x;
    this.y = y;
    this.r = r;   
    this.color = color; 
}
function initScene(){
    //Listening for mouse position changes
    $('canvas').mousemove(function(e){
        targetToGo.x = e.pageX;
        targetToGo.y = e.pageY;
    });
    //Circle generation timer
    var intervalID = setInterval(function(){
        if( shapes.length < MAXIMUM_AMOUNT ){
            for(var i = 0; i < 1; i++){
                //Generating random parameters for circle
                var randX = targetToGo.x - 500 + Math.floor(Math.random() * 1000);   //position x
                var randY = targetToGo.y - 300 + Math.floor(Math.random() * 600);    //position y
                var randRadius = Math.floor(Math.random() * 12);       //radius 
                var randColor = "#"+("000000"+(0xFFFFFF*Math.random()).toString(16)).substr(-6); //color
                //Adding circle to scene
                shapes.push( new CircleModel(randX,randY,randRadius,randColor) ); 
            }
        }else{
            clearInterval(intervalID);
        }
    }, 100);
    //Starts rendering timer -  
    //                  '1000' represents 1 second,as FPS represents seconds,not miliseconds
    setInterval(render,1000/FPS);
}
function render(){
    var ctx = $('canvas')[0].getContext("2d");
    var circle;
    //Clearing the scene
    ctx.clearRect(0,0,$('canvas').width(),$('canvas').height());
    //Drawing circles
    for(var i=0; i < shapes.length;++i){
        circle = shapes[i];
        //(animation part)
        //repositioning circle --
        //             (1/circle.r) is a degree of inertion,and the bigger radius,the slower it moves
        circle.x += (targetToGo.x - circle.x)*1/circle.r;   
        circle.y += (targetToGo.y - circle.y)*1/circle.r;
        ////////////////////////////////////////////
        ctx.fillStyle = circle.color;
        ctx.beginPath();
        ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2, true);
        ctx.closePath();
        ctx.fill();
    }
}

$("canvas").click(function(e){    
    targetToGo = {x: e.pageX, y:e.pageY};
    initScene();   
});

var最大金额=1000，
FPS=30，
塔格托戈//
形状=[]//圆的存储
//助手类
函数圆模型（x，y，r，颜色）{
这个.x=x；
这个。y=y；
这个。r=r；
这个颜色=颜色；
}
函数initScene（）{
//侦听鼠标位置的更改
$（'canvas'）.mousemove（函数（e）{
targetToGo.x=e.pageX；
targetToGo.y=e.pageY；
});
//循环生成计时器
var intervalID=setInterval（函数（）{
如果（形状长度<最大值）{
对于（变量i=0；i<1；i++）{
//圆的随机参数生成
var randX=targetToGo.x-500+Math.floor（Math.random（）*1000）；//位置x
var randY=targetToGo.y-300+Math.floor（Math.random（）*600）；//位置y
var randRadius=Math.floor（Math.random（）*12）；//半径
var randColor=“#”+（“000000”+（0xFFFFFF*Math.random（））.toString（16））.substr（-6）；//color
//将圆添加到场景中
shapes.push（新的圆环模型（randX、randY、randRadius、randColor））；
}
}否则{
clearInterval（intervalID）；
}
}, 100);
//开始渲染计时器-
//“1000”表示1秒，FPS表示秒，而不是毫秒
设置间隔（渲染，1000/FPS）；
}
函数render（）{
var ctx=$（'canvas'）[0].getContext（“2d”）；
var圈；
//清理现场
clearRect（0,0，$（'canvas'）.width（），$（'canvas'）.height（））；
//画圈
对于（变量i=0；i

将此代码放入

$（document）.ready

处理程序中

---

发布一些代码，我们可以使用它。好的，很抱歉造成混乱。这是一个JSFIDLE链接。谢谢您的时间。这是一个圆滑的回答。只要我有足够的声望点数，我就会投票支持它，哈哈。@Chief120这就是你想要的吗？我试着用注释来解释我的代码。我希望你能理解代码。是的，这太棒了！如果我需要澄清的话，可能是关于你获取randColor的程序，也可能是关于1/circle.r的详细说明。谢谢。@Chief120关于

randColor

，我可以说，如果你专心一点，你就会明白其中的逻辑。用语言解释有点困难。只要看看docs

toString（radix）

和

slice

函数就可以了。使用

（1/circle.r）

的情况有点困难。我试图在

谷歌

中搜索有关基本动画原理的链接，但找不到任何有用的东西。谷歌是一个巨大的垃圾。我以后会提供链接和书籍。