canvas实现3d效果的关键是透视投影坐标计算，公式为x′ = x × d / (z + d)、y′ = y × d / (z + d)，需处理坐标系翻转（screeny = canvasheight/2 − y′）和动态缩放（s = d / (z + d)），并限制z∈[0.1,500]避免失真。

Canvas本身是二维的，要画出3D效果，关键不是“渲染3D”，而是把三维点正确算成屏幕上的二维位置——核心就是透视投影坐标计算。公式不复杂，但细节决定是否看起来真实。

最简透视公式：x′ = x × d / (z + d)，y′ = y × d / (z + d)

这是从相似三角形推导出的实用形式。其中：

• d 是焦距（或称“近平面距离”），通常取 200～500，值越大，透视越平缓；越小，近大远小越强烈
• z 是物体到相机的深度，注意：z = 0 表示在相机所在平面，z > 0 表示在相机前方（可被看到），z ≤ -d 会导致除零或反向失真，必须排除
• 实际使用时建议限制 z ∈ [0.1, 500]，投影前先做裁剪，避免飞点或翻转

Canvas坐标系适配：别忘了y轴方向

数学公式输出的 y′ 是“上为正”，但 Canvas 的 y 轴向下为正。所以最终绘制前需翻转：

Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）

用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。

下载

• screenX = x′ + canvasWidth / 2（加偏移居中）
• screenY = canvasHeight / 2 - y′（减法实现y翻转）
• 若模型以原点为中心，加偏移后更易对齐视觉中心

缩放也要跟着z变：大小才像真

仅改位置不够，远的物体还要变小。缩放因子直接来自同一公式：

• s = d / (z + d)，它既是x′/x也是y′/y的比例
• 画圆、矩形或图片时，半径或宽高都乘 s，例如 drawBall(x, y, r * s)
• 不应用缩放，会变成“等距投影”，失去纵深感

动手前两个小提醒

避免一开始就被卡住：

• 先用静态立方体8个顶点测试，比动态旋转更容易定位计算错误
• 打印一两个点的原始z和投影后坐标，确认数值趋势：z增大 → x′/y′减小 → s减小