当光标在画布区域之外时，如何获得悬停效果以进行重置？

// 获取画布元素
const canvas = document.getElementById('canvas');

// 监听鼠标移动事件
canvas.addEventListener('mousemove', function(event) {
  // 获取鼠标坐标
  const mouseX = event.clientX;
  const mouseY = event.clientY;

  // 获取画布区域边界
  const canvasRect = canvas.getBoundingClientRect();
  const canvasLeft = canvasRect.left;
  const canvasTop = canvasRect.top;
  const canvasRight = canvasRect.right;
  const canvasBottom = canvasRect.bottom;

  // 判断光标位置是否在画布区域之外
  if (mouseX < canvasLeft || mouseX > canvasRight || mouseY < canvasTop || mouseY > canvasBottom) {
    // 添加悬停效果，设置光标为手型
    canvas.style.cursor = 'pointer';

    // 执行重置操作，例如清空画布内容
    clearCanvas();
  } else {
    // 移除悬停效果，恢复默认光标样式
    canvas.style.cursor = 'default';
  }
});

// 清空画布内容的函数
function clearCanvas() {
  // 执行清空操作的代码
  // ...
}