转载自：canvas 2D api 3D 视觉

一、平面透视视觉

近者大而远着小乎，对于一个图形而言，在空间内，大小不变的情况下，随着Z轴的正向运动（指向屏幕），那么我们会看到物体变得越来越小，反之则越来越大；而对于我们代码而言，需要关心的，是它现在应该绘制成多大。那么对此我们需要推导出一个“缩放比例”。

以上图为例，同一个圆，它位于屏幕的大小，我们将它的单位定为1单位，那么在它延Z轴方向运动的时候（左图圆形虚线处），它的投影，在我们视觉当中应该为右图大小，那么此时它的缩放比例(（我真的好想好想吐槽简书这所谓的markdown，该有的都没有啊）)

scale = fl / (fl + z)

这条公式怎么得到的？

上图为相似三角形，假设BC为原来圆形的大小（参照上一幅图右侧），DE则为投影大小，那么根据相似三角形等比关系，DE:BC = FL : (FL + Z)，而我们将原来圆形的大小定为1单位，即BC = 1，那么DE = FL / (FL + Z)。

二、旋转坐标计算

有过canvas2D开发经验的童鞋应该有学过如果计算旋转后坐标，旋转α度，则公式为：

x = r * cosα, y = r * sinα;

而在α角度基础上再旋转β度，则公式变成

x' = r * cos(α+β) , y' = r * sin(α+β)

那么根据三角函数两角和差公式，则2转变为（这里的减加符号打不出来，只能截图，ppt里我是截图旋转图片，因为实在找不到这个符号）：

将3代入2，可得：

x' = r * (cosαcosβ - sinαsinβ ),  y' = r * (sinαcosβ + cosαsinβ)

将1代入4，可得（结论，重点，高中知识忘记的现在也已经一步步重新推出来了，这是Z轴旋转计算公式）：

x' = xcosβ - ysinβ, y' = ycosβ + xsinβ