2021/05/14

那些在 HTML 畫 Banner 的小事


在網頁復刻應用程式時,第一關面對的是 UI 重建,而最先遇到的就是介面橫幅 (Banner)。

在重建的過程中,難免會把以前的開發套路帶進來,造成時間上的浪費。

橫幅解構

要重建橫幅,就要先解構它成為一個個小零件,再重組起來,內容如下:

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

一共三個元件,我是這麼處理的。


JavaScript,衝啊!

處理到這個問題的時候,我想都沒想就拿 HTML5 的 Canvas 物件來開始雕刻,耗費了我兩天的時間,主要有幾個卡點:

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


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

 

CSS 就有漸層功能,何須用上 Canvas?


CSS 重塑我的三觀

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


主管問:為什麼你跪著看螢幕?


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


CSS 就有漸層功能,何須用上 Canvas?

這句話一直在我腦海迴盪著。


See also

2 則留言: