使用 JavaScript 及 DOM 製作立體透視圖及動畫
阿恆
你有想像過單純用 JavaScript 和 DOM 便可以製作立體透視圖甚至動畫?James Edwards 在 Dynamic 3D with CSS and the DOM 中教導我們這方面的技巧。
作者從 Tanket 一篇介紹如何不用點陣圖像或向量圖出發,只用 CSS 的框架邊緣效果來繪畫等邊多角圖形,包括了正三角形、正四邊形、正五邊形、正六邊形等,例如有一個邊緣闊度達 50 像素的框架,左右框邊跟上下框邊顏色不同,在垂直和水平框邊的接界處便會產生如下圖的斜線:
只要控制左右和上下框邊的闊度比例,加上改變邊框的顏色,我們便可以得到任意角度和長度的斜線,這些線段就是我們繪畫立體透視圖的「材料」。下一步便是計算我們需要多少線段、每一段的角度、長度和位置,這個過程需要大量的數學運算,這便是 DOM 大顯身手的時候了。
下一步 James 使用 JavaScript 來進行美化的工作,例如把牆壁切片,獨立地計算每一片的位置從而得出更準確的透視效果,牆壁和地板的顏色也可以逐漸改變,使圖象更有深度,甚至在牆壁和地板加上紋理,增加真實感。
當所有程式完成後,用戶只要輸入一幅平面迷宮圖,網頁便會自動生成立體透視圖,快捷方便,沒有大小限制!這裏有一個線上示範(只限 Opera 和 Firefox 瀏覽器),James 還提供了完整的原始碼。