終於做好 Canvas 的基礎教學了!還是搞了我兩個禮拜…😢 因為用框架開發久了,真的有點忘記原生的 Canvas 怎麼寫,但在原生的 Canvas 裡面有很多很重要的邏輯和原理,所以決定從這個基礎先玩起,才不會像學了 jQuery 不懂 JavaScript 一樣惋惜,這次重新做筆記也發現有好多以前沒注意的細節呢!!除了參考《Canvas 2D網頁開發:HTML 5與平面圖型的完美結合》之外,還有 MDN 官網的教學和其他網路教學,集大成後寫好了新筆記,大概把會用到的功能都講一遍,剩下就要靠大家實戰應用了!💪

我自己大概是 2015 年開始接觸 Canvas(拖到現在才寫好一個像樣的筆記和範例…😅),不過當時真的很不懂,都是到處看範例、試看看效果如何,還沒有真正用在專案上,直到年底有個專案需要 Facebook 分享圖片的需求,所以決定來用 Canvas,因為考慮到類似「截圖」的功能,懵懂懵懂的情況下,就花了三天開發了一個還滿滿意的互動操作,但是實際上對於 Canvas 的每個用法並不是非常熟悉,果然需要很多經驗開發,會更明白這個東西強大的功能!

第一次寫 Canvas 的感受就是…「太像 Processing 了吧!」😳😳😳 但後來發現其實 Canvas 畫布概念不只是在網頁上,在 APP 和其他視覺互動都很常看到類似的應用,現在幾乎大部分需要複雜動畫的網站都會用 Canvas,大概也是因為如果程式寫得好,它的效能真的會比其他動畫效果佳,而且能處理非常複雜的畫面,再加上手機瀏覽器都支援顯示… 如今它的延伸越來越廣,未來還會是它的天下!😆

依據我個人目前開發的經驗,會覺得如果需要簡易的「合圖功能」,用原生 Canvas 就足夠喔!寫起來也滿快的~除非你需要很大量的動畫和圖形效果,或是其他遊戲碰撞計算、更複雜的機制…我才覺得需要其他框架來支援,畢竟原生寫起來不會受框架限制、比較好控制,也不用另外載入其他檔案呢!😃 希望對路過的你會有幫助喔!😊

全部的範例:Canvas 2D 學習筆記.zip,請搭配服用~

180214 更新,重新將筆記轉成網頁版本!😊
網址在這邊:http://test.domojyun.net/MEMO/Canvas/

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *