玩Canvas玩了有兩三個禮拜了,平面的東西玩來玩去也就那樣,所以就開始折騰3D了。
因為Canvas畫布終究還是平面的,所以要有3D就得抽象出一個Z軸。然后再把3D坐標轉換成2D坐標,畫到畫布上,再通過旋轉等變換效果來產生3D感。做3D一般就是由點到線,然后由線到面。
【點】
點的話,之前我有寫過關于3D的博文 解析3D標簽云,其實很簡單 ,這篇博文雖然講的是用div實現的3D標簽云,但是追根到底產生的3D原理是一樣的,就是最簡單的由點構成的3D了。每一個標簽就是一個點。也可以直接看這個DEMO:
3DBall
里面的總共有五百個點對象,每個點對象相應的根據他們的Z軸來改變他們的大小和透明度,再平均分布在球面上,就構成了點球體了。
【線】
如果知道怎么做點之后,線也就容易了,只要把點連起來就行了。這個沒做DEMO,不過也確實不難。就循環moveTo,然后lineTo,線就出來了。
【面】
這篇博文主要講面滴。
二話不說,先上個DEMO吧 :
3D立方體
做一個立方體,我用了三個對象:點對象,面對象,以及立方體本身一個對象:
下面這個是點對象,x,y,z是點的三維坐標,_get2d方法是把三維坐標轉換到二維層面來。fallLength是焦距。
|
新聞熱點
疑難解答