HTML5 Canvas实现鼠标悬停圆形图标放大缩小渐变动画

要实现鼠标移至绘制的某个圆形图标上时放大圆，移开时缩小的渐变动画，可以使用HTML5的Canvas和JavaScript来实现。\n\n首先，需要在HTML中创建一个Canvas元素和一个用于显示圆的div元素，如下所示：\n\nhtml\n<canvas id="myCanvas" width="500" height="500"></canvas>\n<div id="circle"></div>\n\n\n然后，在JavaScript中获取Canvas元素和div元素，并设置Canvas的绘制上下文和圆的初始半径大小：\n\njavascript\nvar canvas = document.getElementById("myCanvas");\nvar ctx = canvas.getContext("2d");\nvar circle = document.getElementById("circle");\n\nvar radius = 50; // 圆的初始半径大小\n\n\n接下来，需要监听鼠标移动事件，当鼠标移至Canvas上时，根据鼠标位置绘制圆，并放大圆的半径；当鼠标移开时，缩小圆的半径。代码如下：\n\njavascript\ncanvas.addEventListener("mousemove", function(event) {\n var rect = canvas.getBoundingClientRect();\n var mouseX = event.clientX - rect.left;\n var mouseY = event.clientY - rect.top;\n \n // 清空Canvas\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n \n // 绘制圆\n ctx.beginPath();\n ctx.arc(mouseX, mouseY, radius, 0, 2 * Math.PI);\n ctx.closePath();\n ctx.fillStyle = "blue";\n ctx.fill();\n \n // 放大圆的半径\n if (radius < 100) {\n radius += 1;\n }\n \n // 更新div元素的大小和位置\n circle.style.width = (radius * 2) + "px";\n circle.style.height = (radius * 2) + "px";\n circle.style.left = (mouseX - radius) + "px";\n circle.style.top = (mouseY - radius) + "px";\n});\n\ncanvas.addEventListener("mouseout", function() {\n // 清空Canvas\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n \n // 缩小圆的半径\n if (radius > 50) {\n radius -= 1;\n }\n \n // 更新div元素的大小和位置\n circle.style.width = (radius * 2) + "px";\n circle.style.height = (radius * 2) + "px";\n});\n\n\n最后，可以使用CSS样式来设置div元素的样式，使其显示为一个圆形，并添加过渡效果，实现渐变动画：\n\ncss\n#circle {\n position: absolute;\n border-radius: 50%;\n background-color: blue;\n transition: width 0.3s, height 0.3s, left 0.3s, top 0.3s;\n}\n\n\n通过以上代码，当鼠标移至Canvas上时，会在对应位置绘制一个圆，并且同时放大圆的半径和div元素的大小；当鼠标移开时，圆的半径和div元素的大小会逐渐缩小，实现了渐变动画效果。