使用HTML5的SVG繪製漸層光影 |
|
作 者：許嘉仁 精誠資訊 恆逸教育訓練中心 資深講師 |
||||||
|
HTML5中的圖形繪製有兩種，一種是SVG(Scalable Vector Graphics)，只需要定義標籤及屬性就能畫出圖形、文字、顏色漸層等等圖案；另一種是Canvas API，這種則需使用JavaScript來繪製圖案。 以下讓我們使用SVG標籤來示範畫出圖片，然後透過CSS3的定義，讓滑鼠移到適當的位置時出現佛祖光或耶穌光，請參考以下步驟： 1. 建立一張標準的HTML5網頁：
2. 在網頁的<body>標籤內放入標準的<svg>標籤定義，利用<pattern>標籤定義一張寬360高270的圖片準備當底圖，使用<rect>標籤來畫出同樣寬360高270的矩形，然後透過fill屬性填入底圖，如下灰底部分的對應：
結果如下圖：
3. 在<svg>標籤內定義兩個白色到透明色的環形漸層，其中的fx、fy屬性用來定義起始的漸層中心點；然後使用<circle>標籤定義一個圓形的範圍來顯示佛祖光，使用<ellipse>標籤定義一個橢圓形範圍來顯示耶穌光，由於要由上打光，所以將橢圓形使用rotate屬性旋轉了120度，兩個圖形暫且都填入了透明色；最後在<style>標籤內透過CSS3的定義，當滑鼠移入這兩個圖形範圍時改填入環型漸層：
4. 佛祖光結果如下圖：
5. 耶穌光結果如下圖：
您可在下列課程中了解更多HTML5、CSS3、JavaScript開發最新的開發技巧喔！
| ||||||
| 可在課程中了解更多技能… | ||||||
| 相關學習資源︰ | ||||||
 |
