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

你可以使用HTML5的Canvas元素和JavaScript来实现这个效果。以下是一个示例代码：

HTML:

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

JavaScript:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var circle = { x: canvas.width / 2, y: canvas.height / 2, radius: 50, scale: 1 };

canvas.addEventListener("mousemove", function(event) {
  var rect = canvas.getBoundingClientRect();
  var mouseX = event.clientX - rect.left;
  var mouseY = event.clientY - rect.top;

  if (isInsideCircle(mouseX, mouseY)) {
    scaleCircle(1.2);
  } else {
    scaleCircle(1);
  }
});

function drawCircle() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(circle.x, circle.y, circle.radius * circle.scale, 0, 2 * Math.PI);
  ctx.fillStyle = "blue";
  ctx.fill();
  ctx.closePath();
}

function isInsideCircle(x, y) {
  var distX = x - circle.x;
  var distY = y - circle.y;
  var distance = Math.sqrt(distX * distX + distY * distY);
  return distance <= circle.radius;
}

function scaleCircle(scale) {
  circle.scale = scale;
  drawCircle();
}

drawCircle();

在这个例子中，我们首先获取Canvas元素和绘图上下文。然后定义了一个圆的对象，包含圆的位置、半径和缩放比例。添加了一个鼠标移动事件监听器，当鼠标移动到Canvas上时，判断鼠标是否在圆内，如果是则将圆的缩放比例设置为1.2，否则设置为1。最后，绘制圆的函数使用缩放比例来绘制圆，并清除Canvas上的内容