Canvas 动画效果：鼠标移入放大，移出缩小圆形图标

"Canvas实现鼠标移至Canvas绘制的一个圆形图标上时放大圆，移开时缩小的渐变动画，利用requestAnimationFrame"\n\n实现这个效果，需要使用Canvas的mousemove和mouseout事件来监听鼠标的移动和移出动作，然后利用requestAnimationFrame来实现动画效果。\n\n首先，我们需要创建一个Canvas元素，并获取Canvas的上下文对象。然后，我们创建一个Circle类来表示圆形图标，包括圆心坐标、半径、放大缩小的状态等属性。\n\n接下来，我们需要在Canvas上绘制圆形图标和放大缩小的圆。在mousemove事件中，我们可以获取鼠标当前的坐标，然后判断鼠标是否在圆形图标的范围内。如果是，则将圆形图标的状态设置为放大状态，并调用requestAnimationFrame来实现渐变放大的动画效果。在动画的每一帧中，我们可以根据当前的放大状态来更新圆的半径，并重新绘制圆形图标。\n\n在mouseout事件中，我们将圆形图标的状态设置为缩小状态，并调用requestAnimationFrame来实现渐变缩小的动画效果。在动画的每一帧中，我们可以根据当前的缩小状态来更新圆的半径，并重新绘制圆形图标。\n\n下面是一个简单的示例代码：\n\njavascript\n// 创建Canvas元素\nconst canvas = document.createElement('canvas');\ndocument.body.appendChild(canvas);\nconst ctx = canvas.getContext('2d');\n\n// 设置Canvas的宽高\ncanvas.width = 400;\ncanvas.height = 400;\n\n// 圆形图标类\nclass Circle {\n constructor(x, y, radius) {\n this.x = x;\n this.y = y;\n this.radius = radius;\n this.scale = 1; // 放大缩小的状态，默认为1\n }\n\n // 绘制圆形图标\n draw() {\n ctx.beginPath();\n ctx.arc(this.x, this.y, this.radius * this.scale, 0, Math.PI * 2);\n ctx.fillStyle = 'red';\n ctx.fill();\n }\n\n // 更新圆形图标的半径\n updateRadius() {\n if (this.scale < 1) {\n this.scale += 0.02; // 缩小状态，每帧递减0.02\n } else if (this.scale > 1) {\n this.scale -= 0.02; // 放大状态，每帧递增0.02\n }\n }\n}\n\n// 创建圆形图标对象\nconst circle = new Circle(200, 200, 20);\n\n// 监听鼠标移动事件\ncanvas.addEventListener('mousemove', (e) => {\n const rect = canvas.getBoundingClientRect();\n const mouseX = e.clientX - rect.left;\n const mouseY = e.clientY - rect.top;\n\n // 判断鼠标是否在圆形图标的范围内\n const distance = Math.sqrt((mouseX - circle.x) ** 2 + (mouseY - circle.y) ** 2);\n if (distance <= circle.radius) {\n circle.scale = 1.2; // 设置放大状态\n requestAnimationFrame(animate); // 开始渐变放大动画\n }\n});\n\n// 监听鼠标移出事件\ncanvas.addEventListener('mouseout', () => {\n circle.scale = 0.8; // 设置缩小状态\n requestAnimationFrame(animate); // 开始渐变缩小动画\n});\n\n// 动画函数\nfunction animate() {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n circle.updateRadius();\n circle.draw();\n requestAnimationFrame(animate);\n}\n\n// 绘制初始的圆形图标\ncircle.draw();\n\n\n以上代码实现了当鼠标移至Canvas绘制的圆形图标上时，圆形图标会放大，移开时会缩小的渐变动画效果。