在網頁復刻應用程式時，第一關面對的是 UI 重建，而最先遇到的就是介面橫幅 (Banner)。
在重建的過程中，難免會把以前的開發套路帶進來，造成時間上的浪費。
橫幅解構
要重建橫幅，就要先解構它成為一個個小零件，再重組起來，內容如下：
- 漸層方塊
- 主標題
- 子標題
一共三個元件，我是這麼處理的。
JavaScript，衝啊！
處理到這個問題的時候，我想都沒想就拿 HTML5 的 Canvas 物件來開始雕刻，耗費了我兩天的時間，主要有幾個卡點：
- 在一個固定大小的畫布上作畫，當大小改變時，畫面也會等比例縮放，而非超出 Canvas 畫布。
- 採用絕對座標，比起用 em 等比例單位，使用 px 絕對單位會更適合在 Canvas 上操作。
就在千辛萬苦完成後，【腦殘賤貓的備忘錄】好友老貓在看過我的程式碼不久，只淡淡說了句：
CSS 就有漸層功能，何須用上 Canvas？
CSS 重塑我的三觀
老貓就在看完後，立馬就丢了串程式碼給我，就幾行字，字裡行間我感受到濃濃地經驗釋出。
主管問：為什麼你跪著看螢幕？
我默默地把 Code 記錄在 CodeSandbox 上，在 See also 區，有興趣的人可以去觀摩下，看看 JavaScript 和 CSS 的 Power 輸出。
CSS 就有漸層功能，何須用上 Canvas？
這句話一直在我腦海迴盪著。
哎呀呀！我被 highlight 了
回覆刪除讚啦！🤣
刪除