Canvas Mouseover 事件处理：精确获取重叠图形对象

在Canvas中处理mousemove事件，获取鼠标经过的对象，可以通过以下步骤来实现：\n\n1. 首先，获取鼠标在Canvas上的坐标位置。可以使用event对象的clientX和clientY属性获取相对于浏览器窗口的鼠标位置，再减去Canvas元素的偏移量，即可得到相对于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});\n\n\n2. 然后，遍历所有的图形对象，判断鼠标位置是否在每个图形的范围内。可以通过比较鼠标的坐标位置与图形的位置、尺寸等属性来判断。\n\njavascript\nvar objects = []; // 存储所有的图形对象\n\nfunction checkMouseOverObjects(mouseX, mouseY) {\n var hoveredObject = null;\n for (var i = objects.length - 1; i >= 0; i--) {\n var object = objects[i];\n if (mouseX >= object.x && mouseX <= object.x + object.width && \n mouseY >= object.y && mouseY <= object.y + object.height) {\n hoveredObject = object;\n break;\n }\n }\n return hoveredObject;\n}\n\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 var hoveredObject = checkMouseOverObjects(mouseX, mouseY);\n // ...\n});\n\n\n3. 最后，根据需要，可以在mousemove事件中处理鼠标经过的图形对象。可以通过hoveredObject变量来获取当前鼠标所在的图形对象，然后进行进一步的操作。\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 var hoveredObject = checkMouseOverObjects(mouseX, mouseY);\n \n if (hoveredObject) {\n console.log('鼠标经过了图形对象：', hoveredObject);\n // 进一步处理鼠标经过的图形对象\n }\n});\n\n\n通过上述步骤，就可以在Canvas中处理mousemove事件，获取鼠标经过的对象，并且可以精确地得出鼠标此时经过的图形。