2021/05/14

HTML Banner 設計：CSS 漸層 vs. Canvas 繪製



在網頁復刻應用程式時，第一關面對的就是 UI 重建，而最先遇到的，常常就是那個佔據網頁最顯眼位置的傢伙——介面橫幅 (Banner)。在重建的過程中，難免會把以前的開發套路帶進來，就像我一樣，結果就是浪費了一堆寶貴的時間。

 

Banner 結構解析：化繁為簡

要重建橫幅，就像組模型一樣，要先把它解構成一個個小零件，再重新組裝起來。以這個 Banner 來說，內容如下：

  • 漸層方塊
  • 主標題
  • 子標題

就這三個元件，搞得自己是灰頭土臉...


JavaScript Canvas 繪製 Banner 漸層：是否搞錯了什麼

第一步的「漸層方塊」，就是要實作網頁 Banner 的漸層效果，按照我研讀 "深入淺出 HTML5 程式設計" 一書的經驗，想都沒想就拿 HTML5 的 Canvas 物件來開始雕刻，耗費了我兩天的時間，主要有幾個卡點：

 

  • 在一個固定大小的畫布上作畫，當大小改變時，畫面也會等比例縮放，而非超出 Canvas 畫布。
  • 採用絕對座標，比起用 em 等比例單位，使用 px 絕對單位會更適合在 Canvas 上操作。


就在千辛萬苦完成後，【腦殘賤貓的備忘錄】好友老貓在看過我的程式碼不久，只淡淡說了句：

 

CSS 就有漸層功能，何須用上 Canvas？


CSS 漸層：更簡潔高效的 Banner 方案

老貓就在看完後，立馬就丢了串程式碼給我，就幾行字，字裡行間我感受到濃濃地經驗釋出。


主管問：為什麼你跪著看螢幕？


我默默地把 Code 記錄在 CodeSandbox 上，在 See also 區，有興趣的人可以去觀摩下，看看 JavaScript 和 CSS 的 Power 輸出。


總結

對於網頁 Banner 漸層效果的實現，CSS 漸層在大多數情況下都是比 Canvas 更好的選擇。

 

 


See also

2 則留言:

訂閱： 張貼留言 (Atom)