html 缩放后 canvas 鼠标坐标不正常

你好！对于 HTML 中缩放后导致 Canvas 鼠标坐标不正常的问题，可以尝试以下几个解决方法：

1. 使用 CSS 的 `transform` 属性进行缩放，而不是直接修改 Canvas 的宽高属性。这样可以保持 Canvas 的实际像素大小不变，避免鼠标坐标计算错误。

2. 在缩放后重新计算鼠标坐标。可以通过获取鼠标事件的相对坐标，然后除以缩放比例来得到实际坐标。

3. 使用 `window.devicePixelRatio` 属性获取设备的像素比例，然后将鼠标坐标乘以该比例进行修正。

4. 使用第三方库如 `fabric.js` 或 `paper.js` 来处理 Canvas，它们提供了更高级的鼠标事件处理和坐标转换功能。

希望以上方法能帮助到你解决问题！如果还有其他疑问，请随时提问。

相关问题

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` 属性来进行缩放操作。通过获取鼠标事件相对于视口的坐标，再根据缩放比例计算实际的鼠标坐标。

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

canvas鼠标坐标兼容

为了兼容不同浏览器的获取鼠标坐标的方法，可以使用以下代码：

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  var scaleX = canvas.width / rect.width;
  var scaleY = canvas.height / rect.height;
  return {
    x: (evt.clientX - rect.left) * scaleX,
    y: (evt.clientY - rect.top) * scaleY
  };
}

canvas.addEventListener('mousemove', function(evt) {
  var mousePos = getMousePos(canvas, evt);
  console.log(mousePos.x, mousePos.y);
}, false);

在这个例子中，`getMousePos()` 函数会返回鼠标在 canvas 上的坐标。该函数使用 `getBoundingClientRect()` 方法获取 canvas 元素的位置和大小，然后通过计算鼠标在 canvas 上的相对位置来获取鼠标坐标。注意，我们需要将鼠标坐标乘以 `scaleX` 和 `scaleY`，以考虑到 canvas 元素的缩放。