canvas绘制复杂几何图形的核心在于数学建模而非api调用，需用参数方程生成曲线、多边形布尔运算实现交并差、矩阵变换管理坐标系、反向映射支持交互，并通过绝对值驱动与数值截断保障精度稳定性。
Canvas 绘制复杂几何图形，核心不在 API 调用本身，而在于把图形结构准确转化为坐标序列和路径逻辑——这依赖清晰的数学建模，而非堆砌 drawArc 或 lineTo。
用参数方程生成曲线轮廓
贝塞尔曲线、椭圆弧、螺旋线等无法用直线段直接逼近的形状，需先写出其参数方程，再采样生成点列。例如，阿基米德螺旋线 r = a + bθ，可转为笛卡尔坐标：x = (a + b·t)·cos(t)，y = (a + b·t)·sin(t)，t 在 [0, 4π] 均匀取 200 点，逐点 moveTo/lineTo 即得平滑螺旋。
- 采样密度要匹配视觉精度：曲率大处（如尖角附近）需局部加密，可用自适应步长或二阶差分预判曲率变化
- 避免浮点累积误差：不基于上一点递推坐标，每个点都用原始参数独立计算
- 超出 canvas 边界时提前截断，而非绘制后再裁剪——节省 CPU 和抗锯齿开销
多边形布尔运算的坐标级实现
两个任意多边形求并、交、差，不能靠 CSS clip 或 layered draw，必须在顶点层面做几何计算。常用 Vatti 算法或 Greiner-Hormann 算法，核心是求所有边线交点、按绕向排序、标记内外区域。
- 先统一多边形顶点顺序（全顺时针或逆时针），否则交点归类会错乱
- 线段相交判断用叉积符号法，比解方程更稳定；共线情况单独处理，避免除零或 NaN
- 结果多边形常含冗余点（三点共线），需后处理简化：计算相邻向量夹角，小于 1° 的中间点直接剔除
仿射变换与坐标系嵌套管理
旋转缩放倾斜等操作若全靠 ctx.rotate()、ctx.scale() 累加，极易因状态残留导致错位。更可靠的做法是：所有图形原始坐标均定义在局部坐标系中，用矩阵运算算出最终屏幕坐标，再批量 draw。
- 每个图形维护自己的变换矩阵（3×3），父子图形间通过矩阵乘法合成，不依赖 ctx 的全局状态
- 文本、虚线图案等非矢量元素，需同步应用相同变换——例如旋转文字时，measureText 返回的宽度也要经变换矩阵映射
- 鼠标交互坐标反向映射：用变换矩阵的逆矩阵，将屏幕坐标转回图形本地坐标，才能准确命中检测
实时重绘中的数值稳定性控制
动画或拖拽场景下，反复累加角度、偏移量会导致浮点误差漂移。比如每帧 rotate(0.01745) 执行 1000 次，实际角度可能偏离 π/2 达 0.02 弧度。
- 关键状态变量（如旋转角、缩放因子）不增量更新，改用绝对值+时间戳驱动：angle = initialAngle + speed × (now - startTime)
- 坐标计算中避免小数除法链式传递，例如 (x / scale + dx) * scale 应写成 x + dx * scale，减少舍入次数
- 定期对角度模 2π、对坐标做 toFixed(6) 截断（仅显示层，不用于计算），防止 display 层出现肉眼可见抖动
不复杂但容易忽略：数学模型决定图形能否正确，Canvas API 只负责忠实呈现。模型错了，画得再快也没意义；模型稳了，哪怕用 requestAnimationFrame 每秒 30 帧，也能干净还原任意精度的几何结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
