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

要实现鼠标移至绘制的某个圆形图标上时放大该圆，移开时缩小的渐变动画，可以使用HTML5的Canvas和JavaScript来实现。

首先，需要在HTML中创建一个Canvas元素和一个用于显示圆的div元素，如下所示：

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

然后，在JavaScript中获取Canvas元素和div元素，并设置Canvas的绘制上下文和圆的初始半径大小：

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

var radius = 50; // 圆的初始半径大小

接下来，需要监听鼠标移动事件，当鼠标移至Canvas上时，根据鼠标位置绘制圆，并放大圆的半径；当鼠标移开时，缩小圆的半径。代码如下：

canvas.addEventListener("mousemove", function(event) {
  var rect = canvas.getBoundingClientRect();
  var mouseX = event.clientX - rect.left;
  var mouseY = event.clientY - rect.top;
  
  // 清空Canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 绘制圆
  ctx.beginPath();
  ctx.arc(mouseX, mouseY, radius, 0, 2 * Math.PI);
  ctx.closePath();
  ctx.fillStyle = "blue";
  ctx.fill();
  
  // 放大圆的半径
  if (radius < 100) {
    radius += 1;
  }
  
  // 更新div元素的大小和位置
  circle.style.width = (radius * 2) + "px";
  circle.style.height = (radius * 2) + "px";
  circle.style.left = (mouseX - radius) + "px";
  circle.style.top = (mouseY - radius) + "px";
});

canvas.addEventListener("mouseout", function() {
  // 清空Canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 缩小圆的半径
  if (radius > 50) {
    radius -= 1;
  }
  
  // 更新div元素的大小和位置
  circle.style.width = (radius * 2) + "px";
  circle.style.height = (radius * 2) + "px";
});

最后，可以使用CSS样式来设置div元素的样式，使其显示为一个圆形，并添加过渡效果，实现渐变动画：

#circle {
  position: absolute;
  border-radius: 50%;
  background-color: blue;
  transition: width 0.3s, height 0.3s, left 0.3s, top 0.3s;
}

通过以上代码，当鼠标移至Canvas上时，会在对应位置绘制一个圆，并且同时放大圆的半径和div元素的大小；当鼠标移开时，圆的半径和div元素的大小会逐渐缩小，实现了渐变动画效果