CSS 缩放html Canvas 坐标正常的示例

当使用 CSS 缩放 HTML 中的 Canvas 元素时，可以通过以下示例来保持鼠标坐标的正常：

HTML 代码：

<div id="canvas-container">
  <canvas id="my-canvas"></canvas>
</div>

CSS 代码：

#canvas-container {
  width: 500px; /* 设置容器的宽度 */
  height: 500px; /* 设置容器的高度 */
  transform-origin: top left; /* 设置缩放的基准点为左上角 */
  transform: scale(0.5); /* 设置缩放比例为 0.5 */
}

#my-canvas {
  width: 100%; /* 设置 Canvas 宽度为容器宽度 */
  height: 100%; /* 设置 Canvas 高度为容器高度 */
}

JavaScript 代码：

const canvas = document.getElementById("my-canvas");
const ctx = canvas.getContext("2d");

canvas.addEventListener("mousemove", function(event) {
  const rect = canvas.getBoundingClientRect(); // 获取 Canvas 相对于视口的位置信息
  const scaleX = canvas.width / rect.width; // 计算 X 轴缩放比例
  const scaleY = canvas.height / rect.height; // 计算 Y 轴缩放比例
  
  const mouseX = (event.clientX - rect.left) * scaleX; // 计算实际的鼠标 X 坐标
  const mouseY = (event.clientY - rect.top) * scaleY; // 计算实际的鼠标 Y 坐标
  
  // 在控制台输出实际坐标
  console.log("Mouse coordinates:", mouseX, mouseY);
});

这个示例中，我们将 Canvas 包裹在一个容器中，并使用 CSS 的 `transform` 属性来进行缩放操作。通过获取鼠标事件相对于视口的坐标，再根据缩放比例计算实际的鼠标坐标。

希望这个示例能够帮助你解决问题！如果还有其他疑问，请随时提问。