canvas動畫-跟着鼠標移到的小球

小球能夠跟着鼠標移到，點擊小球時會按既定的座標移到小球（再也不跟着鼠標移到），鼠標移出canvas，此時動畫中止，鼠標進入動畫時動畫開始

<canvas id="canvas" width="600" height="300" style="border:1px solid #ccc;"></canvas>

<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var raf;
var running = false;
var ball = {
    x: 100,
    y: 100,
    vx: 5,
    vy: 2,
    radius: 25,
    color: "purple",
    draw: function() {
        context.beginPath();
        context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, true);
        context.closePath();
        context.fillStyle = this.color;
        context.fill();
    }
}

function clear() {
    context.fillStyle = 'rgba(255,255,255,0.3)';
    context.fillRect(0, 0, canvas.width, canvas.height);
}

function draw() {
    clear()
    ball.draw();
    ball.x += ball.vx;
    ball.y += ball.vy;
    //加速度，
    ball.vy *= .99;
    ball.vy += .25;
    //邊界檢測，
    if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
        ball.vy = -ball.vy
    }
    if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
        ball.vx = -ball.vx
    }
    //遞歸執行draw()
    raf = window.requestAnimationFrame(draw)
}

canvas.addEventListener("mousemove", function(e) {
    if (!running) {
        clear()
		ball.x = e.layerX;
		ball.y = e.layerY;
        //ball.x = e.clientX;
        //ball.y = e.clientY;
        ball.draw()
    }
})

canvas.addEventListener("click", function(e) {
    if (!running) {
        raf = window.requestAnimationFrame(draw);
        //做用是避免準備移出時，圓圈跟着鼠標運動
        running = true;
    }
})
canvas.addEventListener("mouseout", function() {
    window.cancelAnimationFrame(raf);
    //重置running,爲下一次mousemove作準備
    running = false;
})
ball.draw()
</script>

查看動畫效果

https://cloud.tencent.com/developer/support-plan?invite_code=2758nhrdof0gg