如何在在线聊天的javascript 2D画布上设置相对鼠标位置，人们可以通过点击来移动角色

// 获取画布元素
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

// 角色位置
let characterX = 0;
let characterY = 0;

// 获取画布相对于窗口的偏移量
const canvasOffsetX = canvas.offsetLeft;
const canvasOffsetY = canvas.offsetTop;

// 监听鼠标移动事件
canvas.addEventListener("mousemove", (event) => {
  // 获取相对鼠标位置
  const mouseX = event.clientX - canvasOffsetX;
  const mouseY = event.clientY - canvasOffsetY;

  // 绘制角色
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.fillRect(characterX, characterY, 20, 20);

  // 判断鼠标是否在角色附近，改变鼠标样式
  if (mouseX > characterX && mouseX < characterX + 20 && mouseY > characterY && mouseY < characterY + 20) {
    canvas.style.cursor = "pointer";
  } else {
    canvas.style.cursor = "default";
  }
});

// 监听鼠标点击事件
canvas.addEventListener("click", (event) => {
  // 获取相对鼠标位置
  const mouseX = event.clientX - canvasOffsetX;
  const mouseY = event.clientY - canvasOffsetY;

  // 移动角色
  characterX = mouseX;
  characterY = mouseY;

  // 绘制角色
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.fillRect(characterX, characterY, 20, 20);
});