canvas大图坐标挪到小图坐标计算方法

将canvas大图坐标转换为小图坐标，可以使用以下步骤：
1. 获取canvas元素的宽度和高度。
2. 获取鼠标在canvas元素上的坐标。
3. 使用getBoundingClientRect()方法获取canvas元素相对于浏览器窗口的位置。
4. 计算出鼠标在canvas元素上的相对位置。
5. 将相对位置映射到小图的像素坐标上。

具体的代码实现可以参考以下示例：

function convertToSmallCanvas(canvas, x, y) {
  const canvasElement = canvas.getBoundingClientRect();
  const ratio = canvas.width / canvasElement.width;
  const smallX = (x - canvasElement.left) * ratio;
  const smallY = (y - canvasElement.top) * ratio;
  return { x: smallX, y: smallY };
}

使用示例：

const canvas = document.getElementById('large-canvas');
canvas.addEventListener('mousemove', (event) => {
  const { x, y } = convertToSmallCanvas(canvas, event.clientX, event.clientY);
  console.log(`Small canvas coordinates: (${x}, ${y})`);
});