Canvas画布自动缩放需同步控制三要素：像素尺寸（width/height）、CSS显示尺寸（style.width/height）和上下文缩放（ctx.scale()），并结合devicePixelRatio适配高清屏，用ResizeObserver监听容器变化实现精准响应式缩放。
Canvas实现画布自动缩放，核心不是“让图形变小变大”，而是让整个绘图区域随容器动态适配——既要清晰，又不能拉伸变形，还得应对高清屏和布局变化。关键在于同步控制三件事：画布的像素尺寸（width/height属性）、CSS显示尺寸（style.width/style.height）、以及绘图上下文的坐标系缩放（ctx.scale()）。
同步设置像素尺寸与CSS尺寸
Canvas默认不响应式。仅用CSS设width: 100%会导致内容被浏览器强行拉伸，图像模糊、线条发虚。必须手动更新canvas.width和canvas.height为实际所需像素值：
- 获取父容器可视宽度：
const rect = container.getBoundingClientRect() - 计算逻辑像素尺寸：
canvas.width = rect.width * dpr，canvas.height = rect.height * dpr（dpr为window.devicePixelRatio） - 用CSS把画布“压回”视觉尺寸：
canvas.style.width = rect.width + 'px'，canvas.style.height = rect.height + 'px'
适配高清屏：用devicePixelRatio校准
在Retina屏等高DPR设备上，若忽略设备像素比，1px CSS宽度只对应1个物理像素，而屏幕实际能显示2×或3×个，结果就是模糊。解决方法是：
- 按
dpr放大画布内在分辨率（提升绘制精度） - 再用
ctx.scale(dpr, dpr)告诉绘图上下文：“我现在画的1单位，实际要占dpr个像素” - 这样，
fillRect(0,0,1,1)仍画出清晰的1 CSS像素方块
监听容器变化，而非仅窗口大小
现代布局（Flex/Grid/侧边栏折叠）常使父容器尺寸变化但window.onresize不触发。推荐使用ResizeObserver：
- 监听
container而非window，精准捕获真实尺寸变动 - 回调中调用重设函数，并在重设前
ctx.save()、重设后ctx.restore()保护状态 - 降级方案：定时轮询
container.clientWidth，间隔建议150ms左右
缩放后内容居中并完整显示
如果目标是“把一组图形自动缩放到刚好填满画布且居中”，需额外两步计算：
- 先确定图形边界框（
minX,minY,width,height） - 算缩放比：
scale = Math.min(canvas.width / contentWidth, canvas.height / contentHeight) - 平移量：
translateX = (canvas.width - contentWidth * scale) / 2 - minX * scale，同理算translateY - 变换顺序必须是：
ctx.translate(translateX, translateY)→ctx.scale(scale, scale)→ 绘图
