Canvas在flex/grid中需用ResizeObserver同步width/height与clientWidth/clientHeight，并重置坐标系或缩放ctx.scale()，否则内容拉伸模糊、点击失灵；CSS缩放须配image-rendering: pixelated防锯齿。
Canvas在flex或grid容器里不随父级缩放
Canvas元素默认是替换元素（replaced element），它的渲染尺寸由width和height属性（不是CSS样式）决定，CSS的width: 100%或flex: 1只影响其**布局盒大小**，不触发重绘——结果就是Canvas内容被拉伸/压缩，像素模糊，甚至完全错位。
常见错误现象：canvas在响应式布局中看起来“糊了”“变形了”“只显示左上角一小块”，但控制台没报错；用getBoundingClientRect()查发现clientWidth/clientHeight和canvas.width/canvas.height数值对不上。
- 必须手动同步：把
canvas.width和canvas.height设为当前渲染尺寸（即canvas.clientWidth和canvas.clientHeight） - 不能只靠CSS：哪怕写了
width: 100%; height: 100%，也得JS干预 - 监听时机关键：用
ResizeObserver比window.resize更准，尤其在flex/grid动态变化时
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const resize = () => {
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
// 重绘逻辑放这里（比如清空、重画图形）
ctx.clearRect(0, 0, canvas.width, canvas.height);
draw(); // 你的绘制函数
};
new ResizeObserver(resize).observe(canvas);
Canvas缩放后坐标系没重置导致点击失灵
改完width/height只是让像素格子变多了，但Canvas的坐标系还是按旧尺寸算的。比如原来画布是400×300，你把它拉到800×600，再用ctx.fillRect(200, 150, 10, 10)，实际会出现在右下角——因为200/150是原尺寸一半，现在却成了四分之一位置。
根本原因是：Canvas的绘图API基于“CSS像素”坐标系，而width/height定义的是“设备像素”分辨率。两者脱节就出问题。
立即学习“前端免费学习笔记（深入）”；
- 每次resize后，必须重置
ctx.scale()或手动换算鼠标坐标 - 推荐做法：保持
canvas.width === canvas.clientWidth，这样1 CSS像素 = 1 Canvas像素，坐标直接可用 - 如果非要缩放（比如做高清渲染），就得用
ctx.scale(ratio, ratio)并统一处理所有坐标输入
移动端Safari里Canvas不响应触摸事件
部分iOS Safari版本（尤其是15.x–16.x）在Canvas容器用了transform或flex: 1时，touchstart事件可能不触发，或者clientX/clientY返回0。这不是Canvas本身的问题，而是浏览器对“可点击区域”的判定bug。
- 给
canvas加style="cursor: pointer"能强制激活事件捕获 - 避免在Canvas父元素上用
transform: scale()——它会让事件坐标映射失效 - 确保
canvas没有被其他绝对定位元素（比如遮罩层）挡住，哪怕透明度为0 - 必要时监听
document的touchmove，再用canvas.getBoundingClientRect()反算坐标
用CSS image-rendering修复缩放锯齿
Canvas内容被CSS拉伸时，默认插值方式是双线性（blurry），尤其画线条或像素风图形时特别明显。虽然改width/height能治本，但如果临时要用CSS缩放（比如做动画过渡），就得控制渲染质量。
-
image-rendering: pixelated：强制最近邻插值，适合像素艺术、图表网格线 -
image-rendering: crisp-edges：Chrome支持，偏向锐化边缘，但兼容性差（Safari不认） - 别用
auto或smooth——这是默认值，也是模糊元凶
示例写法：canvas { image-rendering: pixelated; image-rendering: -webkit-optimize-contrast; }（后者是Safari旧前缀）
这事没法一劳永逸——Canvas本质是位图，缩放就是丢信息。真要保精度，就老老实实按需重绘，别指望CSS兜底。
