html绘制小球并跟随鼠标移动,利用JS如何实现小球跟随鼠标移动

你可以使用HTML5的Canvas元素和JavaScript来实现小球跟随鼠标移动的效果。

首先，在HTML中创建一个Canvas元素，并设置它的宽度和高度以适应屏幕：

<canvas id="myCanvas" width="500" height="500"></canvas>

接下来，使用JavaScript获取Canvas元素，并在上面绘制一个小球：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// 绘制小球
ctx.beginPath();
ctx.arc(50, 50, 10, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill();

这将在Canvas元素上绘制一个红色的小球，位于坐标（50，50）处。

接下来，你需要监听鼠标移动事件，并计算出小球应该移动的位置。可以使用以下代码来实现这一点：

canvas.addEventListener("mousemove", function(event) {
    var mouseX = event.clientX - canvas.offsetLeft;
    var mouseY = event.clientY - canvas.offsetTop;

    // 计算小球应该移动到的位置
    var ballX = mouseX;
    var ballY = mouseY;

    // 清除画布并重新绘制小球
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.arc(ballX, ballY, 10, 0, 2 * Math.PI);
    ctx.fillStyle = "red";
    ctx.fill();
});

这将监听Canvas元素上的“mousemove”事件，并计算出鼠标的位置。然后，它将清除画布并重新绘制小球在鼠标的位置上。

这样，你就可以实现小球跟随鼠标移动的效果了。