如何为canvas的指定局部区域设置自定义png格式CSS cursor样式

该需求可以实现，以下是两种常用实现方案：

方案1：纯CSS实现（性能最优，适合固定区域场景） #

原理是在canvas上方叠加一个和目标区域大小匹配的透明遮罩层，仅给该层设置自定义光标：

HTML结构 #

<!-- 外层容器做定位基准 -->
<div style="position: relative; display: inline-block;">
  <canvas class="myClass" width="600" height="400"></canvas>
  <!-- 左侧光标触发区域，大小按需调整 -->
  <div class="cursor-trigger"></div>
</div>

CSS样式 #

.myClass {
  position: relative;
  z-index: 0;
}
.cursor-trigger {
  position: absolute;
  left: 0;
  top: 0;
  /* 左侧300px的配置，要50%宽度直接改为width: 50% */
  width: 300px;
  height: 100%;
  z-index: 1;
  background: transparent;
  cursor: url('../img/myCursor.png') 7 33, auto;
}

备注：如果需要响应canvas的鼠标交互，可将canvas的交互事件绑定到外层容器，或者直接选择JS方案避免事件遮挡问题。

方案2：JS动态判断（更灵活，适合区域动态变化场景） #

监听canvas的鼠标事件，实时判断当前鼠标坐标是否在目标区域，动态切换光标样式：

const canvas = document.querySelector('.myClass')
// 鼠标移动时判断区域切换光标
canvas.addEventListener('mousemove', (e) => {
  const rect = canvas.getBoundingClientRect()
  // 计算鼠标在canvas内的相对X坐标
  const mouseX = e.clientX - rect.left
  // 判断是否在左侧目标区域
  // 左侧300px写法：mouseX < 300；左侧50%写法：mouseX < rect.width * 0.5
  if (mouseX < 300) {
    canvas.style.cursor = "url('../img/myCursor.png') 7 33, auto"
  } else {
    canvas.style.cursor = "auto" // 可替换为其他默认光标样式
  }
})
// 鼠标移出canvas时重置光标
canvas.addEventListener('mouseleave', () => {
  canvas.style.cursor = "auto"
})

内容的提问来源于stack exchange，提问作者NimChimpsky