如何动态调整Canvas尺寸并保持图像位置不变？

这问题我太熟了！之前做移动端可视化项目时踩过一模一样的坑。核心原因是你混淆了Canvas的两个关键尺寸：CSS样式尺寸（控制它在页面上显示的大小）和Canvas绘图缓冲区尺寸（也就是元素的width/height属性，决定绘图的像素精度和坐标系统）。当你只设置CSS的width:100%; height:100%时，Canvas的绘图缓冲区还是默认的300x150像素，浏览器会把这个小缓冲区拉伸到div的大小，自然会导致内容变形、位置偏移。

下面是一套完整的解决方案，能完美适配窗口resize、手机横竖屏切换等场景，保证内容位置精确：

核心思路 #

让Canvas的绘图缓冲区尺寸（width/height属性）完全匹配它的实际显示尺寸（父div的像素大小），同时考虑设备像素比避免模糊，然后在尺寸变化时重新绘制内容。

具体实现步骤 #

1. 基础HTML/CSS结构 #

先搭建好容器和Canvas的基础布局：

<div id="canvas-wrapper">
  <canvas id="dynamic-canvas"></canvas>
</div>

#canvas-wrapper {
  /* 这里可以设置任意你需要的容器尺寸，比如百分比、视窗单位 */
  width: 90vw;
  height: 70vh;
  border: 1px solid #ddd;
  margin: 20px auto;
}

#dynamic-canvas {
  width: 100%;
  height: 100%;
  display: block; /* 清除Canvas默认的内边距，避免出现滚动条 */
}

2. JavaScript逻辑实现 #

const wrapper = document.getElementById('canvas-wrapper');
const canvas = document.getElementById('dynamic-canvas');
const ctx = canvas.getContext('2d');

// 同步Canvas尺寸到容器的核心函数
function syncCanvasSize() {
  // 获取容器的实际显示尺寸（像素值）
  const rect = wrapper.getBoundingClientRect();
  // 考虑设备像素比，避免高分辨率屏幕下绘图模糊
  const dpr = window.devicePixelRatio || 1;
  
  // 设置Canvas的绘图缓冲区尺寸
  canvas.width = rect.width * dpr;
  canvas.height = rect.height * dpr;
  
  // 调整绘图上下文的缩放比例，让绘图坐标对应容器的显示尺寸
  ctx.scale(dpr, dpr);
  
  // 尺寸变化后重新绘制内容
  redrawContent();
}

// 自定义绘图函数，这里示例绘制固定位置的元素
function redrawContent() {
  // 先清空画布
  ctx.clearRect(0, 0, wrapper.getBoundingClientRect().width, wrapper.getBoundingClientRect().height);
  
  // 示例1：绘制一个距离容器左上角50px的正方形
  ctx.fillStyle = '#27ae60';
  ctx.fillRect(50, 50, 120, 120);
  
  // 示例2：绘制一个位于容器中心的圆形
  const wrapperWidth = wrapper.getBoundingClientRect().width;
  const wrapperHeight = wrapper.getBoundingClientRect().height;
  ctx.fillStyle = '#3498db';
  ctx.beginPath();
  ctx.arc(wrapperWidth / 2, wrapperHeight / 2, 50, 0, Math.PI * 2);
  ctx.fill();
}

// 初始化尺寸并绑定监听事件
syncCanvasSize();
// 监听窗口大小变化
window.addEventListener('resize', syncCanvasSize);
// 监听移动端横竖屏切换
window.addEventListener('orientationchange', syncCanvasSize);
// 进阶：监听容器自身尺寸变化（比如容器被JS修改、动画改变尺寸）
const resizeObserver = new ResizeObserver(syncCanvasSize);
resizeObserver.observe(wrapper);

关键细节说明 #

• 设备像素比（dpr）：高分辨率屏幕（比如iPhone的Retina屏）下，1个CSS像素对应多个物理像素，直接设置Canvas尺寸为容器CSS尺寸会导致绘图模糊。通过dpr放大缓冲区，再用ctx.scale()把绘图坐标缩回去，既能保证清晰度，又能让绘图逻辑基于容器的显示尺寸编写。
• 重新绘制内容：每次修改Canvas的width/height属性都会清空绘图缓冲区，所以必须重新执行绘图逻辑。如果需要保留之前的内容，可以先将画布内容转为ImageData保存，再重新绘制，但大部分场景下直接重新绘制更简洁。
• ResizeObserver：相比传统的resize事件，它能精准监听单个元素的尺寸变化，不管是窗口resize还是容器自身尺寸被修改，都能及时触发同步。

这样处理后，不管你怎么调整容器尺寸、切换手机横竖屏，Canvas的绘图坐标都会和容器的显示尺寸完全对应，元素位置不会出现偏移或缩放变形。

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