Canvas 鼠标悬停放大缩小渐变动画 - 使用 CSS Transform 和 Transition

要实现鼠标移至图标上时的放大效果和移开时的缩小效果，可以使用 CSS3 的 transform 属性和 transition 属性结合 Canvas 来实现。\n\n首先，在 Canvas 中绘制图标，可以使用 drawImage() 方法将图标绘制到 Canvas 上。然后，使用 CSS 样式将 Canvas 的宽高设置为图标的初始宽高。\n\n接下来，使用 JavaScript 监听鼠标移动事件，当鼠标移至 Canvas 上时，将 Canvas 的宽高设置为原始宽高的 1.2 倍，即放大效果。同时，使用 transition 属性设置过渡效果，使宽高的变化过程平滑。当鼠标移开时，将 Canvas 的宽高恢复到原始宽高，即缩小效果。\n\n下面是一个示例代码：\n\nHTML:\nhtml\n<canvas id="canvas"></canvas>\n\n\nCSS:\ncss\n#canvas {\n width: 100px; /* 图标的初始宽度 */\n height: 100px; /* 图标的初始高度 */\n transition: width 0.3s, height 0.3s; /* 过渡效果的时间 */\n}\n\n\nJavaScript:\njavascript\nvar canvas = document.getElementById('canvas');\nvar ctx = canvas.getContext('2d');\nvar icon = new Image();\nicon.src = 'icon.png'; // 图标的路径\n\n// 绘制图标\nicon.onload = function() {\n ctx.drawImage(icon, 0, 0, canvas.width, canvas.height);\n}\n\n// 监听鼠标移动事件\ncanvas.addEventListener('mouseenter', function() {\n canvas.style.width = canvas.width * 1.2 + 'px'; // 放大效果\n canvas.style.height = canvas.height * 1.2 + 'px';\n});\n\ncanvas.addEventListener('mouseleave', function() {\n canvas.style.width = canvas.width / 1.2 + 'px'; // 缩小效果\n canvas.style.height = canvas.height / 1.2 + 'px';\n});\n\n\n注意，这里使用了 Canvas 的 CSS 样式属性来改变宽高，而不是直接修改 Canvas 元素的宽高属性。这是因为直接修改 Canvas 元素的宽高属性会导致 Canvas 内容被清空，需要重新绘制图标。而使用 CSS 样式属性则可以保留 Canvas 内容，只改变显示效果。