Question

我想让画布中的青色点旋转，追逐我的鼠标，但就像我的鼠标有重力一样。可以想象它就像鼠标是行星而物体是彗星。我尝试了这段代码，但它只是让青色点像疯了一样旋转而不是太跟随鼠标。

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

Answer 1

我删除了一些代码以简化我的回答，但是这里的想法是：

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

Link to jsfiddle

使画布元素绕轨道运行/跟随鼠标

1 个答案: