canvas 默认为 inline 元素，因 vertical-align: baseline 导致底部留白；其 width/height 属性控制像素分辨率，style 宽高仅控制显示尺寸；flex 布局中需显式设置宽高以防塌缩；绝对定位不影响内部坐标系，鼠标事件需用 getboundingclientrect() 校准。
canvas 默认是 inline 元素，会留白
直接写 <canvas></canvas> 时，它 behaves like a letter（比如 x），按文本基线对齐，导致下方多出几像素空白——这不是 margin 或 padding，而是 vertical-align: baseline 的默认行为。紧贴其后的元素会被顶开，布局错位。
常见误判：以为是父容器 margin、子元素 margin-collapse 或 canvas 自身 padding，实际查不到任何盒模型属性值。
- 最稳妥解法：
display: block（推荐，一劳永逸） - 次选：
vertical-align: top或vertical-align: middle - 避免用
float清除浮动来“解决”，现代布局应优先用 Flex/Grid
width/height 属性和 CSS 宽高不是一回事
canvas.width 和 canvas.height 是 DOM 属性，决定画布的**像素分辨率**；而 style.width 和 style.height 只控制**显示尺寸**。混淆会导致图像模糊、拉伸或坐标系错乱。
例如：<canvas width="400" height="300"></canvas> + style="width: 800px; height: 600px" → 图像被双倍拉伸，线条变虚，文字锯齿明显。
- 正确顺序：先设 HTML
width/height属性，或 JS 赋值canvas.width = 400、canvas.height = 300 - 再用 CSS 控制显示大小，如
width: 100%; height: auto或固定像素值 - 不要用 CSS 百分比设置
canvas.width/canvas.height—— 它们只接受整数像素值
Flex 布局中 canvas 必须有明确宽高
把 <canvas></canvas> 放进 display: flex 容器时，若父容器没设 width/height，或 canvas 自身没设 HTML width/height，它可能塌缩为 0×0，或撑满但内容不渲染。
原因：canvas 是替换元素（replaced element），在 Flex 中不自动继承父容器尺寸，也不像 div 那样有默认 min-width/min-height。
- 确保父容器有明确尺寸，如
width: 100vw; height: 100vh - canvas 至少要有 HTML
width和height属性（哪怕只是占位用的 1×1） - 若需响应式，JS 动态同步
canvas.width/canvas.height到容器 clientWidth/clientHeight
绝对定位不影响内部坐标系
给 <canvas></canvas> 加 position: absolute 或 top/left 不会改变它的绘图原点（0,0 还是左上角），也不会影响 ctx.fillRect(0,0,10,10) 的绘制位置。
但要注意：如果同时用了 CSS 缩放（如 transform: scale(2)），那 canvas 内部绘制的内容会被整体缩放，且事件坐标需手动反向映射。
- 绝对定位只影响 canvas 元素在页面中的位置，不影响 ctx 坐标系统
- 如果 canvas 外层套了 transform 容器，
getBoundingClientRect()返回的位置需减去 offset 才能对应到 canvas 像素坐标 - 鼠标事件监听时，别直接用
event.clientX，要结合canvas.getBoundingClientRect()计算相对偏移
canvas.width 和 canvas.height 没同步更新，所有绘制都会被压缩或拉伸。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
