Canvas鼠标移动事件：获取鼠标坐标和图形信息

要实现Canvas鼠标移动事件，可以使用Canvas的addEventListener方法来监听鼠标移动事件，然后在事件处理函数中获取鼠标坐标，并判断坐标是否在某个图形内。\n\n以下是一个示例代码：\n\nhtml\n<!DOCTYPE html>\n<html>\n<head>\n <title>Canvas鼠标移动事件示例</title>\n</head>\n<body>\n <canvas id="myCanvas" width="500" height="500"></canvas>\n <script>\n const canvas = document.getElementById('myCanvas');\n const ctx = canvas.getContext('2d');\n\n // 绘制一个矩形图形\n ctx.fillStyle = 'red';\n ctx.fillRect(50, 50, 100, 100);\n\n // 添加鼠标移动事件监听器\n canvas.addEventListener('mousemove', handleMouseMove);\n\n // 鼠标移动事件处理函数\n function handleMouseMove(event) {\n // 获取鼠标相对于canvas的坐标\n const rect = canvas.getBoundingClientRect();\n const mouseX = event.clientX - rect.left;\n const mouseY = event.clientY - rect.top;\n\n // 判断鼠标坐标是否在矩形内\n if (mouseX >= 50 && mouseX <= 150 && mouseY >= 50 && mouseY <= 150) {\n console.log('鼠标在矩形内');\n }\n }\n </script>\n</body>\n</html>\n\n\n在上述示例中，我们首先创建一个500x500的Canvas，并在其中绘制一个红色的矩形图形。然后使用addEventListener方法为Canvas添加mousemove事件的监听器，事件处理函数为handleMouseMove。\n\n在handleMouseMove函数中，我们使用event.clientX和event.clientY获取鼠标相对于整个窗口的坐标，然后通过canvas.getBoundingClientRect()方法获取Canvas相对于窗口的坐标偏移，从而计算出鼠标相对于Canvas的坐标。\n\n最后，我们判断鼠标坐标是否在矩形内，如果在矩形内，则输出提示信息。你可以根据需要在判断条件中执行具体的操作。