Canvas实现鼠标移至Canvas绘制的一个圆形图标上时放大圆移开时缩小的渐变动画利用requestAnimationFrame

实现这个效果，需要使用Canvas的mousemove和mouseout事件来监听鼠标的移动和移出动作，然后利用requestAnimationFrame来实现动画效果。

首先，我们需要创建一个Canvas元素，并获取Canvas的上下文对象。然后，我们创建一个Circle类来表示圆形图标，包括圆心坐标、半径、放大缩小的状态等属性。

接下来，我们需要在Canvas上绘制圆形图标和放大缩小的圆。在mousemove事件中，我们可以获取鼠标当前的坐标，然后判断鼠标是否在圆形图标的范围内。如果是，则将圆形图标的状态设置为放大状态，并调用requestAnimationFrame来实现渐变放大的动画效果。在动画的每一帧中，我们可以根据当前的放大状态来更新圆的半径，并重新绘制圆形图标。

在mouseout事件中，我们将圆形图标的状态设置为缩小状态，并调用requestAnimationFrame来实现渐变缩小的动画效果。在动画的每一帧中，我们可以根据当前的缩小状态来更新圆的半径，并重新绘制圆形图标。

下面是一个简单的示例代码：

// 创建Canvas元素
const canvas = document.createElement('canvas');
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');

// 设置Canvas的宽高
canvas.width = 400;
canvas.height = 400;

// 圆形图标类
class Circle {
  constructor(x, y, radius) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.scale = 1; // 放大缩小的状态，默认为1
  }

  // 绘制圆形图标
  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius * this.scale, 0, Math.PI * 2);
    ctx.fillStyle = 'red';
    ctx.fill();
  }

  // 更新圆形图标的半径
  updateRadius() {
    if (this.scale < 1) {
      this.scale += 0.02; // 缩小状态，每帧递减0.02
    } else if (this.scale > 1) {
      this.scale -= 0.02; // 放大状态，每帧递增0.02
    }
  }
}

// 创建圆形图标对象
const circle = new Circle(200, 200, 20);

// 监听鼠标移动事件
canvas.addEventListener('mousemove', (e) => {
  const rect = canvas.getBoundingClientRect();
  const mouseX = e.clientX - rect.left;
  const mouseY = e.clientY - rect.top;

  // 判断鼠标是否在圆形图标的范围内
  const distance = Math.sqrt((mouseX - circle.x) ** 2 + (mouseY - circle.y) ** 2);
  if (distance <= circle.radius) {
    circle.scale = 1.2; // 设置放大状态
    requestAnimationFrame(animate); // 开始渐变放大动画
  }
});

// 监听鼠标移出事件
canvas.addEventListener('mouseout', () => {
  circle.scale = 0.8; // 设置缩小状态
  requestAnimationFrame(animate); // 开始渐变缩小动画
});

// 动画函数
function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  circle.updateRadius();
  circle.draw();
  requestAnimationFrame(animate);
}

// 绘制初始的圆形图标
circle.draw();

以上代码实现了当鼠标移至Canvas绘制的圆形图标上时，圆形图标会放大，移开时会缩小的渐变动画效果