需手动维护世界坐标到像素的映射关系，用 ctx.transform() 控制缩放平移，鼠标事件需反向计算逻辑坐标，避免重设变换影响UI，禁用DOM模拟以保渲染精度与性能，导出时须处理 devicePixelRatio 并关闭抗锯齿。
怎么用 <canvas> 实现可拖拽缩放的编辑区域
纯 <canvas> 本身不自带坐标系变换或元素管理能力，直接在上面画图后想拖动/缩放整个视图，必须手动维护一个「世界坐标 → 画布像素」的映射关系。漏掉这层抽象，后续所有交互（比如点击选中、框选、对齐线）都会错位。
实操建议：
- 用
ctx.setTransform(1, 0, 0, 1, 0, 0)清空默认变换，再用ctx.transform(scale, 0, 0, scale, offsetX, offsetY)统一控制缩放和平移 - 鼠标事件坐标要反向计算：比如
canvas.getBoundingClientRect()拿到画布在页面的位置，再减去 offset，除以当前scale，才能得到逻辑坐标 - 别在每次
draw时重设transform—— 先ctx.save()，画完ctx.restore()，否则文字、UI 控件（如按钮）会跟着缩放变形
为什么不能直接用 DOM 元素模拟画布编辑区
有人用 <div> 堆叠 + position: absolute 模拟节点，看似简单，但遇到旋转、非矩形裁剪、路径描边、像素级滤镜等需求时，CSS 无法精确还原 Canvas 的渲染行为，导出图片或打印预览时必然失真。
更关键的是性能陷阱：
立即学习“前端免费学习笔记（深入）”；
- 上百个
<div>节点 +transform动画，强制触发 Layout + Paint，滚动/缩放卡顿明显 - DOM 事件捕获路径长，点击判断需遍历所有元素，而 Canvas 可用
isPointInPath()或空间索引（如四叉树）加速 - 撤销/重做需深克隆 DOM 结构，内存占用比序列化 JSON 描述高 3–5 倍
canvas.toDataURL() 导出模糊？检查这三处
导出图片发虚，90% 是因为没处理设备像素比（window.devicePixelRatio）。Canvas 的 width/height 属性是 CSS 像素，但实际绘制缓冲区受 DPR 影响。
正确做法：
- 创建 canvas 时，把
width和height设为clientWidth * window.devicePixelRatio - 用
ctx.scale(dpr, dpr)让绘图逻辑仍按 CSS 像素写，不用改业务代码 - 导出前调用
ctx.webkitImageSmoothingEnabled = false（Safari）或ctx.imageSmoothingEnabled = false，避免抗锯齿让线条发灰
低代码场景下，如何让非前端人员安全修改画布逻辑
直接暴露 ctx API 给配置层极危险 —— 一行 ctx.clearRect() 就清空全部内容，且无沙箱约束。
可行方案是封装一层声明式指令集：
- 只允许通过 JSON 描述图形：比如
{ type: "rect", x: 10, y: 20, width: 100, fill: "#f00" } - 渲染层用白名单函数解析，跳过任何含
eval、function、prototype的字段 - 交互逻辑走事件总线：
emit("node:click", { id: "btn-1" })，而不是让用户写canvas.addEventListener
真正难的不是画出来，而是让缩放、选中、吸附、导出这些状态始终同步且不互相污染。多数坑都藏在「以为坐标是像素，其实它是逻辑单位」这个认知偏差里。
