Canvas 实现鼠标跟随动画效果：简单易懂的教程

想要实现鼠标移至图标上的动画效果，可以使用 HTML5 的 Canvas 元素和 JavaScript 来完成。这篇文章将带您逐步实现这一效果。

1. 创建 Canvas 元素

首先，在 HTML 中创建一个 Canvas 元素，并设置其宽度和高度。例如：

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

2. 获取 Canvas 上下文

接下来，在 JavaScript 中获取 Canvas 元素，并创建一个绘图上下文对象：

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

3. 定义绘制图标函数

定义一个函数来绘制图标。这里以绘制一个圆形图标为例：

function drawIcon(x, y, radius) {
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, 2 * Math.PI);
  ctx.fillStyle = 'blue';
  ctx.fill();
  ctx.closePath();
}

4. 添加鼠标移动事件监听器

在 Canvas 上添加鼠标移动事件监听器。当鼠标移动时，获取鼠标的坐标，并在 Canvas 上绘制图标：

canvas.addEventListener('mousemove', function(event) {
  var x = event.clientX - canvas.offsetLeft;
  var y = event.clientY - canvas.offsetTop;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawIcon(x, y, 30);
});

5. 绘制初始图标

最后，调用 drawIcon 函数来绘制初始图标。例如，在 Canvas 的中心位置绘制一个图标：

var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
drawIcon(centerX, centerY, 30);

完整代码

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

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

  function drawIcon(x, y, radius) {
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, 2 * Math.PI);
    ctx.fillStyle = 'blue';
    ctx.fill();
    ctx.closePath();
  }

  canvas.addEventListener('mousemove', function(event) {
    var x = event.clientX - canvas.offsetLeft;
    var y = event.clientY - canvas.offsetTop;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawIcon(x, y, 30);
  });

  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;
drawIcon(centerX, centerY, 30);
</script>

通过以上代码，当鼠标移动到 Canvas 上时，会在鼠标位置绘制一个蓝色的圆形图标，形成鼠标移至图标上的动画效果。您可以根据需要修改绘制的图标样式和动画效果。