Html 使画布元素环绕/跟随鼠标

我想让青色的点在画布上旋转追逐我的鼠标，但就像我的鼠标有重力一样。把它想象成老鼠是行星，物体是彗星。我试过这段代码，但它只是让青点疯狂地旋转，而不是跟着鼠标太多

<div class="section">
<div id="intro">
<div id="mouse" style="border-radius: 50%; position: absolute;height: 20px;width: 20px;background-color: blue;"></div>

<canvas id="canvas" style="background:black;">
</canvas>
<script>
    var canvas = document.getElementById("canvas");
    canvas.width = $(window).width(); 
    canvas.height = $(window).height();
</script>
<script>
    var canvas = document.querySelector("#canvas")
    var ctx = canvas.getContext("2d");
    var mouseX;
    var mouseY; 

    var kule = {
        cx : 100,
        cy : 100,
        vy : 2,
        vx : 2,
        r : 5,
        e : 1,
        color : "cyan"
    };



    function draw() {
        var image = new Image();
        image.src = "Player.png";

        ctx.drawImage(image, 100, 100);

        var boundsX = canvas.width;
        var boundsY = canvas.height;
        //ctx.clearRect(0, 0, bounds, bounds);
        ctx.fillStyle = kule.color;
        ctx.beginPath();
            ctx.arc(kule.cx, kule.cy, kule.r, 0, Math.PI * 2);
            ctx.fill();
        ctx.closePath();

        var deltaX = mouseX - kule.cx;
        var deltaY = mouseY - kule.cy;

        kule.vy = kule.vy + deltaX/1000;
        kule.vx = kule.vx + deltaY/1000;
        kule.cx = kule.cx + kule.vx;
        kule.cy = kule.cy + kule.vy;


        if (kule.cy + kule.r >= boundsY) {
            kule.vy = -kule.vy * kule.e;
            kule.vy = -(Math.abs(kule.vy)) * kule.e;
            }

        if (kule.cx + kule.r >= boundsX) {
            kule.vx = -kule.vx * kule.e;
            kule.vx = -(Math.abs(kule.vx)) * kule.e;
            }

        if (kule.cy - kule.r <= 0) {
            kule.vy = kule.vy * kule.e;
            kule.vy = (Math.abs(kule.vy)) * kule.e;
            }

        if (kule.cx - kule.r <= 0) {
            kule.vx = kule.vx * kule.e;
            kule.vx = (Math.abs(kule.vx)) * kule.e;
            }
    }
    setInterval(draw, 10);
    $(document).on("mousemove",function(event){
        mouseX = event.pageX;
        mouseY = event.pageY;       
        $("#mouse").animate(
        {
            left:mouseX-10,
            top:mouseY-10
        },0)});     
</script>
</div>

var canvas=document.getElementById（“canvas”）；
canvas.width=$（window.width（）；
canvas.height=$（window.height（）；
var canvas=document.querySelector（“画布”）
var ctx=canvas.getContext（“2d”）；
var mouseX；
var mouseY；
var kule={
cx:100，
赛：100，
vy:2，
vx:2，
r:5，
e:1，
颜色：“青色”
};
函数绘图（）{
var image=新图像（）；
image.src=“Player.png”；
ctx.drawImage（图像，100100）；
var boundsX=canvas.width；
var boundsY=canvas.height；
//clearRect（0，0，bounds，bounds）；
ctx.fillStyle=kule.color；
ctx.beginPath（）；
ctx.arc（kule.cx，kule.cy，kule.r，0，Math.PI*2）；
ctx.fill（）；
ctx.closePath（）；
var deltaX=mouseX-kule.cx；
var deltaY=mouseY-kule.cy；
kule.vy=kule.vy+deltaX/1000；
kule.vx=kule.vx+deltaY/1000；
kule.cx=kule.cx+kule.vx；
kule.cy=kule.cy+kule.vy；
如果（kule.cy+kule.r>=boundsY）{
kule.vy=-kule.vy*kule.e；
kule.vy=-（Math.abs（kule.vy））*kule.e；
}
如果（kule.cx+kule.r>=boundsX）{
kule.vx=-kule.vx*kule.e；
kule.vx=-（Math.abs（kule.vx））*kule.e；
}
如果（kule.cy-kule.r我删除了你的一些代码来简化我的答案，但我的想法是：

var startTime = (new Date()).getTime();
var rotationSpeed = 500; // Milliseconds for a full turn
var orbitRadius = 75;
function draw() {
    var boundsX = canvas.width;
    var boundsY = canvas.height;
    ctx.clearRect(0, 0, boundsX, boundsY);
    ctx.fillStyle = kule.color;

    var currentTime = (new Date()).getTime();
    var passedTime = currentTime - startTime;
    var angle = Math.PI * 2 * (passedTime / rotationSpeed);

    ctx.beginPath();
    ctx.arc(mouseX + Math.cos(angle) * orbitRadius, mouseY + Math.sin(angle) * orbitRadius, kule.r, 0, Math.PI * 2);
    ctx.fill();
}

为了简化我的答案，我删除了您的一些代码，但我的想法如下：

var startTime = (new Date()).getTime();
var rotationSpeed = 500; // Milliseconds for a full turn
var orbitRadius = 75;
function draw() {
    var boundsX = canvas.width;
    var boundsY = canvas.height;
    ctx.clearRect(0, 0, boundsX, boundsY);
    ctx.fillStyle = kule.color;

    var currentTime = (new Date()).getTime();
    var passedTime = currentTime - startTime;
    var angle = Math.PI * 2 * (passedTime / rotationSpeed);

    ctx.beginPath();
    ctx.arc(mouseX + Math.cos(angle) * orbitRadius, mouseY + Math.sin(angle) * orbitRadius, kule.r, 0, Math.PI * 2);
    ctx.fill();
}

简单。给青色点一个环绕距离，然后在每一帧增加旋转角度。要画图，只需根据当前角度和环绕距离计算青色点的偏移量。将该偏移量添加到鼠标光标的位置，即可完成。简单。给青色点一个环绕距离，然后在每一帧增加旋转角度每帧。要绘制，只需根据当前角度和轨道距离计算蓝点的偏移量。将该偏移量添加到鼠标光标的位置，即可完成绘制。