如何在Javascript画布游戏中将鼠标坐标转换为世界坐标？

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

// 获取画布的位置和大小
const canvasRect = canvas.getBoundingClientRect();

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

  // 计算鼠标相对于画布的坐标
  const canvasX = mouseX - canvasRect.left;
  const canvasY = mouseY - canvasRect.top;

  // 如果有缩放或平移操作，进行逆操作
  const scale = 1; // 缩放比例
  const translateX = 0; // 平移量
  const translateY = 0; // 平移量
  const worldX = (canvasX / scale) + translateX;
  const worldY = (canvasY / scale) + translateY;

  // 将鼠标相对于画布的坐标转换为世界坐标
  const worldCoordinates = {
    x: worldX,
    y: worldY
  };

  // 在控制台输出世界坐标
  console.log('World Coordinates:', worldCoordinates);
});