如何修改HTML Canvas代码实现以鼠标位置为中心的缩放功能？

要实现围绕鼠标光标缩放，核心是调整缩放级别时同步更新画布的平移偏移量（panX/panY），确保鼠标指向的原始画布坐标在缩放后仍处于屏幕上的同一位置。以下是具体修改步骤：

1. 修改滚轮事件处理逻辑 #

更新wheel事件监听器，添加平移量计算逻辑：

canvas.addEventListener('wheel', (e) => {
  e.preventDefault(); // 阻止页面默认滚动行为
  const zoomFactor = e.deltaY > 0 ? 0.9 : 1.1; // 滚轮向下缩小，向上放大
  const rect = canvas.getBoundingClientRect();
  const screenX = e.clientX - rect.left; // 鼠标在canvas元素上的X屏幕坐标
  const screenY = e.clientY - rect.top; // 鼠标在canvas元素上的Y屏幕坐标

  // 计算缩放前，鼠标对应的原始画布坐标（未缩放、未平移的坐标系）
  const originalCanvasX = (screenX / zoomLevel) + panX;
  const originalCanvasY = (screenY / zoomLevel) + panY;

  // 更新缩放级别并限制范围
  zoomLevel *= zoomFactor;
  zoomLevel = clampZoom(zoomLevel);

  // 计算新的平移量：让原始画布坐标在新缩放级别下仍对应鼠标的屏幕位置
  panX = originalCanvasX - (screenX / zoomLevel);
  panY = originalCanvasY - (screenY / zoomLevel);

  // 重新绘制画布及相关元素
  updateCanvasAndRedraw();
  drawCenterPixelSelection(centerX, centerY);
  updateCenterCoordinates();
});

2. 确保画布上下文变换正确 #

检查updateCanvasContextProperties函数，确保它正确应用缩放和平移变换（如果你的原有逻辑不符合，替换为以下代码）：

function updateCanvasContextProperties() {
  const ctx = canvas.getContext('2d');
  ctx.setTransform(1, 0, 0, 1, 0, 0); // 重置之前的变换状态
  ctx.scale(zoomLevel, zoomLevel); // 应用缩放倍数
  ctx.translate(-panX, -panY); // 应用平移偏移（负号实现画布向目标方向移动）
  ctx.imageRendering = 'pixelated'; // 保持像素画的清晰风格
}

原理说明 #

• 先获取鼠标在canvas元素上的屏幕坐标，转换为原始画布坐标系下的位置（考虑当前的缩放和平移状态）。
• 缩放级别更新后，重新计算平移量，让这个原始坐标点在新缩放级别下，仍然对应屏幕上的鼠标位置。
• 这样缩放时，鼠标指向的像素点会固定在屏幕原处，实现围绕鼠标的缩放效果。

注意事项 #

• 确保clampZoom函数正确限制zoomLevel的范围（比如MIN_ZOOM=0.1，MAX_ZOOM=10），避免过度缩放导致画布显示异常。
• 所有绘图操作（比如drawPixelsWithZoom）都要基于上下文的变换进行，保证元素位置与缩放平移状态匹配。

内容的提问来源于stack exchange，提问作者Yuuta