canvas内绘制内容关联上鼠标样式

在 Canvas 中绘制内容时，可以通过添加事件监听器来实现与鼠标交互的效果，同时也可以通过修改鼠标样式来增强交互的可视化效果。以下是一些常用的实现方法：

1. 鼠标移动时，修改鼠标样式为指定样式：

// 获取 Canvas 元素
const canvas = document.getElementById('my-canvas');
// 获取 2D 绘图上下文
const ctx = canvas.getContext('2d');

// 设置鼠标样式
canvas.style.cursor = 'pointer';

// 添加鼠标移动事件监听器
canvas.addEventListener('mousemove', function(event) {
  // 获取鼠标位置坐标
  const x = event.clientX - canvas.offsetLeft;
  const y = event.clientY - canvas.offsetTop;
  
  // 绘制内容
  ctx.beginPath();
  ctx.arc(x, y, 10, 0, 2 * Math.PI);
  ctx.fillStyle = 'red';
  ctx.fill();
});

2. 鼠标移动时，根据鼠标位置绘制不同的内容：

// 获取 Canvas 元素
const canvas = document.getElementById('my-canvas');
// 获取 2D 绘图上下文
const ctx = canvas.getContext('2d');

// 添加鼠标移动事件监听器
canvas.addEventListener('mousemove', function(event) {
  // 获取鼠标位置坐标
  const x = event.clientX - canvas.offsetLeft;
  const y = event.clientY - canvas.offsetTop;
  
  // 清空 Canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 绘制内容
  ctx.beginPath();
  ctx.arc(x, y, 10, 0, 2 * Math.PI);
  ctx.fillStyle = 'red';
  ctx.fill();
});

3. 鼠标点击时，绘制指定的内容：

// 获取 Canvas 元素
const canvas = document.getElementById('my-canvas');
// 获取 2D 绘图上下文
const ctx = canvas.getContext('2d');

// 添加鼠标点击事件监听器
canvas.addEventListener('click', function(event) {
  // 获取鼠标位置坐标
  const x = event.clientX - canvas.offsetLeft;
  const y = event.clientY - canvas.offsetTop;
  
  // 绘制内容
  ctx.beginPath();
  ctx.arc(x, y, 10, 0, 2 * Math.PI);
  ctx.fillStyle = 'red';
  ctx.fill();
});

以上是一些常用的方法，可以根据具体需求进行调整和优化。另外，还可以使用 CSS 样式表来自定义鼠标指针的样式，例如：

canvas {
  cursor: url('custom-cursor.png'), auto;
}

其中 `custom-cursor.png` 是自定义的鼠标指针图片，`auto` 表示使用浏览器默认的鼠标指针样式。