Canvas宽高必须用HTML属性设置，否则坐标系错乱；响应式需JS同步更新width/height并scale；DOM与Canvas混排时pointer-events协同控制；鼠标坐标须用getBoundingClientRect()手动转换；离屏Canvas仅缓存静态内容。
Canvas宽高必须用HTML属性设置，否则坐标系就乱了
Canvas不是靠CSS撑开的“弹性盒子”，它的width和height属性直接决定底层像素缓冲区大小。一旦只用style="width:600px;height:400px"，浏览器只会缩放显示，但ctx.fillRect(0, 0, 100, 100)仍画在100×100像素里，再被拉伸成600×400——结果就是模糊、变形、鼠标点不中。
常见错误现象：
- 鼠标点击位置和
ctx绘制区域严重偏移 - 高分屏下图形发虚，
devicePixelRatio没生效 - 响应式重设后文字/线条突然变细或消失
正确做法：
- 始终在HTML中写
<canvas width="800" height="600"></canvas> - 响应式场景下，用JS监听
resize，同步更新canvas.width/canvas.height，再调ctx.scale(dpr, dpr) - 避免把
width/height写成CSS类名或内联style
Canvas与DOM混排时z-index和pointer-events必须协同控制
Canvas是位图层，DOM是盒模型层，二者视觉层级和事件捕获规则完全不同。光靠z-index不能解决所有问题，pointer-events才是事件穿透的关键开关。
立即学习“前端免费学习笔记（深入）”；
典型场景：
- Canvas做背景图层，上面要叠DOM按钮或输入框
- Canvas上需要悬浮提示（tooltip），但又不想遮挡下方可点击区域
- 拖拽DOM元素时，Canvas作为“吸附底图”，需同时响应鼠标移动和DOM事件
实操要点：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 让DOM元素穿透到Canvas下方：给它加
style="pointer-events: none"，但注意这会让它完全无法响应click/hover - Canvas自身默认
pointer-events: auto，无需额外设置；若纯作背景且不交互，可设为none防遮挡 -
overflow: hidden会截断Canvas内容，但不会影响其事件区域——这点和普通DOM不同
鼠标坐标必须手动转换，getBoundingClientRect()只是起点
Canvas没有内置事件坐标映射，event.clientX和ctx坐标系天然脱节。不转换就直接用，90%的交互逻辑会失效。
转换公式本质是两步归一化：
- 先减去Canvas左上角在视口中的偏移：
const rect = canvas.getBoundingClientRect() - 再按比例还原到像素坐标：
const x = (e.clientX - rect.left) * canvas.width / rect.width
关键细节：
-
rect.width是CSS显示宽度，canvas.width是实际像素宽，二者不等时必须做这个除法 - 移动端要用
e.touches[0].clientX，其余逻辑一致 - 如果Canvas被缩放或旋转过CSS transform，
getBoundingClientRect()已包含该变换，不用额外处理
离屏Canvas只能缓存静态内容，别指望它响应事件
离屏Canvas（document.createElement('canvas')）本质是内存中的绘图缓冲区，drawImage()把它贴到主Canvas后，图像就彻底变成像素——没有DOM节点、没有事件绑定能力、也没有语义信息。
容易踩的坑：
- 把整个UI控件（比如按钮、滑块）画进离屏Canvas，以为能省DOM开销——结果用户点不到，也accessibility不了
- 缓存后忘记保留原始几何信息（如文字起始坐标、图标包围盒），导致后续无法做碰撞检测或坐标映射
- 误以为离屏Canvas支持
addEventListener，其实它连click事件都不触发
合理用法：
- 预绘固定底图、图标、字体纹理等静态资源
- 复杂路径或滤镜效果提前合成，减少主Canvas每帧重绘压力
- 缓存对象必须配套保存元数据（如
{x: 100, y: 50, width: 80, height: 30}），用于运行时坐标计算
Canvas真正的复杂点不在API多难记，而在于它彻底脱离DOM事件流和样式系统——所有坐标、缩放、交互、层级都得你亲手对齐。哪怕只漏掉一次beginPath()或一次DPR补偿，都可能让整页交互漂移。
