Canvas通过透视投影公式将3D点转为2D坐标实现伪3D效果，核心是x′=x·d/(z+d)、y′=y·d/(z+d)，需翻转y轴、添加缩放因子s=d/(z+d)并裁剪z值以避免失真。
Canvas 本身不支持 3D 渲染，但能通过数学计算把三维点“翻译”成二维屏幕坐标，再用 ctx.lineTo()、ctx.fillRect() 这类 2D 方法画出有纵深感的画面。关键不是渲染 3D，而是算得准、画得稳。
透视投影公式要记牢
核心是这两个式子：
-
x' = x * d / (z + d) -
y' = y * d / (z + d)
其中d是焦距（通常取 200～500），z是物体到相机的深度（z > 0才可见）。
z 越大，分母越大，x' 和 y' 越小——这就是“远小近大”的来源。
Canvas 坐标系必须适配
数学算出的 y′ 向上为正，但 Canvas 的 y 轴向下为正。所以最终显示坐标得翻转：
-
screenX = x' + canvas.width / 2（水平居中） -
screenY = canvas.height / 2 - y'（y 轴翻转）
若模型以原点为中心，加偏移后更容易对齐视觉中心。
缩放不能漏，否则像贴纸
只改位置不够，远处物体还得变小。缩放因子就藏在公式里：s = d / (z + d)。
画球体时半径乘 s，画图片时宽高也乘 s。不加缩放，效果就是等距投影——没纵深感。
z 值必须裁剪，不然会飞
z 接近 -d 时，分母趋近零，坐标爆炸；z ≤ 0 的点可能反向或不可见。建议限定 z ∈ [0.1, 500]，投影前先过滤越界点，避免失真或崩溃。
动手调试建议从静态开始
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
- 先画一个静止的立方体（8个顶点），比旋转动画更容易发现计算错误
- 打印几个点的原始 z 和投影后坐标，验证趋势：z 增大 → x'/y' 减小 → s 减小
- 检查灭点：所有平行于 z 轴的线段，投影后延长线应汇聚于画布中心（0, 0）——这是透视是否正确的直观标志
不复杂但容易忽略
