Canvas鼠标悬停动画效果实现教程 - 使用JavaScript创建交互式图标

要实现鼠标移至图标上的动画效果，可以使用HTML5的Canvas元素和JavaScript来实现。下面是一个示例代码：\n\nHTML代码：\n\nhtml\n<canvas id="canvas" width="400" height="400"></canvas>\n\n\nJavaScript代码：\n\njavascript\n// 获取Canvas元素和绘图上下文\nvar canvas = document.getElementById("canvas");\nvar ctx = canvas.getContext("2d");\n\n// 定义图标的位置和尺寸\nvar iconX = 200;\nvar iconY = 200;\nvar iconSize = 50;\n\n// 定义图标的颜色\nvar iconColor = "blue";\n\n// 定义鼠标移动时的动画效果\ncanvas.addEventListener("mousemove", function(e) {\n // 获取鼠标相对于Canvas的坐标\n var rect = canvas.getBoundingClientRect();\n var mouseX = e.clientX - rect.left;\n var mouseY = e.clientY - rect.top;\n\n // 判断鼠标是否移动到图标上\n if (mouseX >= iconX && mouseX <= iconX + iconSize &&\n mouseY >= iconY && mouseY <= iconY + iconSize) {\n // 绘制图标\n ctx.fillStyle = iconColor;\n ctx.fillRect(iconX, iconY, iconSize, iconSize);\n } else {\n // 清空画布\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n }\n});\n\n\n在上面的代码中，我们首先获取Canvas元素和绘图上下文，然后定义图标的位置、尺寸和颜色。接下来，我们通过监听Canvas的mousemove事件来实现鼠标移动时的动画效果。在事件处理函数中，我们首先获取鼠标相对于Canvas的坐标，然后判断鼠标是否移动到图标上。如果是，则绘制图标；否则，清空画布。\n\n你可以根据需要修改图标的位置、尺寸、颜色和动画效果等参数来实现你想要的效果。