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）——这是透视是否正确的直观标志

不复杂但容易忽略

大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！