圆圈跟随鼠标HTML5画布jQuery

圆圈跟随鼠标是一种常见的交互效果，通过HTML5画布和jQuery可以实现。具体实现步骤如下：

创建HTML文件，并引入jQuery库和HTML5画布元素：

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <canvas id="myCanvas" width="500" height="500"></canvas>
</body>
</html>

使用JavaScript代码获取画布元素，并监听鼠标移动事件：

$(document).ready(function() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    
    $(document).mousemove(function(event) {
        var x = event.pageX - canvas.offsetLeft;
        var y = event.pageY - canvas.offsetTop;
        
        // 清空画布
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        // 绘制圆圈
        ctx.beginPath();
        ctx.arc(x, y, 10, 0, 2 * Math.PI);
        ctx.fillStyle = "red";
        ctx.fill();
        ctx.closePath();
    });
});