在Canvas中处理mousemove事件获取鼠标经过的对象当两个图形重叠时大的包含小的如何精确得出鼠标此时经过的图形

在Canvas中处理mousemove事件，获取鼠标经过的对象，可以通过以下步骤来实现：

1. 首先，获取鼠标在Canvas上的坐标位置。可以使用event对象的clientX和clientY属性获取相对于浏览器窗口的鼠标位置，再减去Canvas元素的偏移量，即可得到相对于Canvas的坐标位置。

canvas.addEventListener('mousemove', function(event) {
  var rect = canvas.getBoundingClientRect();
  var mouseX = event.clientX - rect.left;
  var mouseY = event.clientY - rect.top;
  // ...
});

2. 然后，遍历所有的图形对象，判断鼠标位置是否在每个图形的范围内。可以通过比较鼠标的坐标位置与图形的位置、尺寸等属性来判断。

var objects = []; // 存储所有的图形对象

function checkMouseOverObjects(mouseX, mouseY) {
  var hoveredObject = null;
  for (var i = objects.length - 1; i >= 0; i--) {
    var object = objects[i];
    if (mouseX >= object.x && mouseX <= object.x + object.width && 
        mouseY >= object.y && mouseY <= object.y + object.height) {
      hoveredObject = object;
      break;
    }
  }
  return hoveredObject;
}

canvas.addEventListener('mousemove', function(event) {
  var rect = canvas.getBoundingClientRect();
  var mouseX = event.clientX - rect.left;
  var mouseY = event.clientY - rect.top;

  var hoveredObject = checkMouseOverObjects(mouseX, mouseY);
  // ...
});

3. 最后，根据需要，可以在mousemove事件中处理鼠标经过的图形对象。可以通过hoveredObject变量来获取当前鼠标所在的图形对象，然后进行进一步的操作。

canvas.addEventListener('mousemove', function(event) {
  var rect = canvas.getBoundingClientRect();
  var mouseX = event.clientX - rect.left;
  var mouseY = event.clientY - rect.top;

  var hoveredObject = checkMouseOverObjects(mouseX, mouseY);
  
  if (hoveredObject) {
    console.log('鼠标经过了图形对象：', hoveredObject);
    // 进一步处理鼠标经过的图形对象
  }
});

通过上述步骤，就可以在Canvas中处理mousemove事件，获取鼠标经过的对象，并且可以精确地得出鼠标此时经过的图形