摘要：Canvas畫布是一個二維平面，如何展示出3D效果？通過將三維空間中的Z軸抽取出來，將圖像的點投影到與Z軸垂直的平面上，在通過旋轉等變換效果，我們就能實現3D效果。

一、建立坐標系

1）立方體坐標系

　　我們以立方體的幾何中心作為原點，如圖建立坐標系。

2）canvas坐標系

　　canvas坐標系主要用於顯示3維平面在瀏覽器中的投影（就像一束光照射在立方體上，在墻面出現的陰影）。三維坐標系的層次在頂層，canvas坐標系在底層。

二、立方體旋轉

　　我們將Y軸抽取出來之後，圖像對於屏幕前的我們，主要是圍繞Z軸和X軸所處平面的軸在旋轉，當我們的鼠標移動時，移動的XY距離可以換算成旋轉的角度。立方體在空間中的旋轉，我們只需要旋轉他的8個頂點，移動後將每個面連起來，就完成了立方體的移動。

　　PS：這裏涉及到了旋轉矩陣的知識，不明白的同學可以搜索一下旋轉矩陣，有詳細的解釋，本文不再闡述。

　　1）繞X軸移動

　　鼠標向下移動時，我們將移動的距離換算為角度θ，利用旋轉矩陣，我們將頂點的矢量與旋轉矩陣相乘，即可得到旋轉後的點。

　　2）繞z軸移動

　　鼠標向下移動時，我們將移動的距離換算為角度β，繼續以上操作。

　　3)XOZ平面上的其他軸

　　當鼠標斜著移動時，我們可以將其分解為兩個方向的移動，在三維空間中也是一樣，將圖像分解為先繞X軸移動θ角，在繞Y軸移動β角。

　　這樣我們就可以獲得相應的移動公式。

三、立方體投影

　　當旋轉完畢之後，就需要將旋轉後的圖像投影到二維平面。直接將Y軸的值去掉，將X軸的值設置為canvas平面的X值，將Z軸的值設置為canvas平面的-Y值。

四、代碼實現

　　下載項目後可查看效果，請使用高版本瀏覽器查看。

　　https://github.com/sincw/sinwProject/tree/master/webContent/src/main/webapp/work/cube

　　效果：

Canvas實現3D效果-可旋轉的立方體