iT邦幫忙

2022 iThome 鐵人賽

DAY 1
0

相信大多數人的網頁設計都是從HTML、CSS開始,這點我就跟大家不同,當時大學專題的時候,因為有程式底子,學長便要我從canvas開始去設計人機界面,因此我並沒有從CSS中得到快速、簡單的成就感,而是天天在和不熟悉的Js對抗,一邊除錯一邊學習,綜觀來看我並不後悔,反而覺得是相當有趣的體驗,而且也不會因為被方便的CSS慣壞了胃口,而失去了學習Canvas的耐心。

簡單來說,CSS就很像在操作一個軟體,比如舊時代的Adobe Flash(筆者國中的課綱裡有),整個過程並不完全是在寫程式,更像是用直覺的方式在設計網頁,如果要加入一些動畫,也有很便捷的方式,基本上就是「參數的設定」,就像開車只要考駕照會駕駛就好,不需要考慮踩油門為什麼會加速、離合器、潤滑油什麼的給專業的機師保養就好了,那麼CSS最強大的地方就是快速了,它集成了大家常用的功能,被設計成精簡的格式,可以快速實驗、構建、測試想要的效果。

本次大約會花兩週的篇幅來展示CSS可以做什麼,跟以往不同不包含教學的部分,但也不要太期待,畢竟這段時間卡到義務役,時間不多,也不確定能做到什麼地步。

相比於CSS幾乎不需要門檻,Canvas就暗藏很多玄機了,直接學不是不行,可以速成但陣痛期會持續一段時間,我建議要符合以下幾點基礎,再來學習Canvas才會事半功倍,(1)先學CSS取得排版、座標、影格動畫的初步理解,(2)先學DOM結構,知曉如何用JS修改DOM中元素的數值(含資料型別),(3)先學JS了解運作原理,如何設計變數和函式。

其實,以上都是學習網頁本來就會學到的東西,但這些基礎中的基礎,正式學會Canvas重要的基石,最終都會學會,端看要直接學Canvas中途遇到一堆問題,還是先苦後甘,打好基礎再來輕鬆自在的學習,端看個人的選擇了。

原生Canvas的自由度比起CSS肯定是更高的,就像是組裝電腦一樣,可以購買各種零件,選擇各式性能的組件,那麼相對的,嘗試跟經驗的累積都不可少,若只是一個小功能而非複雜如遊戲的介面,那效率便很難提高。

綜上所述,CSS和Cavnas相比,

(本來今天收假回來要把文章打完,但腸胃炎有點嚴重,原諒我後續補上)


下一篇
CSS Basic 1
系列文
Css、Canvas動畫大對決,哪個好用?該學哪個?4
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
Mizok
iT邦新手 3 級 ‧ 2022-09-16 23:09:06

GOGOGO

我要留言

立即登入留言