canvas怎么设置鼠标放上显示文字

Canvas 是HTML5提供的一种绘图API，如果你想在鼠标悬停时在Canvas上显示文本，你需要通过JavaScript操作来实现。以下是一个简单的步骤：

1. 首先，在HTML中创建一个canvas元素，并为其添加一个`mouseover`和`mouseout`事件监听器：

<canvas id="myCanvas" width="400" height="400"></canvas>

2. 使用JavaScript获取Canvas的上下文并创建一个`mousemove`事件监听器，当鼠标移动时更新文本：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

let hoverText = '';
canvas.addEventListener('mousemove', function(event) {
  const rect = canvas.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;

  // 清除之前的文本
  if (hoverText !== '') {
    ctx.clearRect(x, y, 100, 20); // 假设你想覆盖的文字区域大小为100x20像素
  }

  // 设置新文本的位置和样式
  hoverText = '鼠标位置 (' + Math.round(x) + ', ' + Math.round(y) + ')';
  ctx.fillText(hoverText, x, y);
});

3. 当鼠标移出Canvas时，将`hoverText`设为空，清空文本：

canvas.addEventListener('mouseout', function() {
  hoverText = '';
  ctx.clearRect(x, y, 100, 20); // 这里再次清除文本
});

现在，当你把鼠标放在Canvas上时，就会显示出文本信息，鼠标离开则会消失。