初識Canvas 入門開場白 獻給追求質感的你

更新 發佈閱讀 2 分鐘
說到筆者第一次認識這個小傢伙,是在大學作專題時,學長傳承下來遙控車控制器,主要功能就是透過點擊、拖曳畫面,來讓控制桿往XY軸變化,進而達到加速、轉彎、減速、倒退的效果。
raw-image


這邊做了一個演示,可以玩玩看。

...

說是美好的邂逅就有點老套了,其實當初筆者才剛學Javascript,裡面的內容完全就是天書,你說若只是讓Canvas畫一張圖,確實很容易;但是要做成動畫般流暢,還得跟使用者作互動,聽起來簡單,卻在當時把我考倒了。


也是因為這樣,回顧這些日子以來受到Canvas的照(ㄊㄨˊ)顧(ㄉㄨˊ),覺得有不少的細節和內容值得分享,甚至還能跨領域結合平面設計的部分,讓圖片更加生動,活靈活現,所以決定開始撰寫這一系列的文章,來從實作面教導大家如何操作Canvas,過程中也會附上簡潔的程式碼,讓大家少走歪路。


當然,我也不是要跟w3school打擂台賽,相信你去問問身邊的人,用過的都說讚,除了有些英文看不懂偶爾要用google翻譯以外。這一系列的文章呢,比起w3school條例式的範例教學,更偏向單元式的教學,將不同的函式功能整合起來實作,等到基礎篇告一段落後,就可以開始結合PS, AI,還有一些函式庫來做效果啦!

在此推薦給對程式有熱情的你,建議先對Html和Css的語法架構有基礎認識,再來學習撰寫Javascript,歡迎在各大平台訂閱我,追蹤後續篇章。


最後分享一下個人的作品集,預計兩個月內,教會大家如何從無到有!



留言
avatar-img
留言分享你的想法!
avatar-img
Jerry The Potato的沙龍
3會員
2內容數
你可能也想看
Thumbnail
「沒有醜女人,只有懶女人。」但我已經是個成熟的大人了,偷懶和漂亮我全都要!!推薦幾款我的保養跟美妝愛用,讓你躺著就把美麗掙了! 雙11在蝦皮爆買了一波,來開箱分享我的懶人系保養及美妝品。趁雙12蝦皮購物一起用優惠囤好物!文末還有「蝦皮分潤計畫」讓你邊花錢邊賺零用錢!
Thumbnail
「沒有醜女人,只有懶女人。」但我已經是個成熟的大人了,偷懶和漂亮我全都要!!推薦幾款我的保養跟美妝愛用,讓你躺著就把美麗掙了! 雙11在蝦皮爆買了一波,來開箱分享我的懶人系保養及美妝品。趁雙12蝦皮購物一起用優惠囤好物!文末還有「蝦皮分潤計畫」讓你邊花錢邊賺零用錢!
Thumbnail
嗨~各位不倒嗡,我是嗡嗡嗡的蜂聲 這個月點詩機主題是「購物清單」,想跟大家聊聊「慾望」這件事。 或許你點開這篇文章的時候,剛好在你心裡閃過類似的念頭 「我好想買那個喔。」 「這真的有必要嗎?」 「我是不是又開始亂花錢了?」 放心,我完全懂。 因為我也是在理性與慾望之間跳恰恰
Thumbnail
嗨~各位不倒嗡,我是嗡嗡嗡的蜂聲 這個月點詩機主題是「購物清單」,想跟大家聊聊「慾望」這件事。 或許你點開這篇文章的時候,剛好在你心裡閃過類似的念頭 「我好想買那個喔。」 「這真的有必要嗎?」 「我是不是又開始亂花錢了?」 放心,我完全懂。 因為我也是在理性與慾望之間跳恰恰
Thumbnail
大家都知道要補充膠原蛋白,但步入中年後的我,肌膚的變化不只是「流失變快」,連狀態也開始慢慢改變。 後來才明白,原來膠原蛋白的補充不只要「吃對」,更要「吃對時間」。 就像肌膚保養會分成早晚程序,膠原的補充其實也需要「分時」進行,才能更貼近需求,效果也更好。 BEAUTY CLUB 讓我養成了「早
Thumbnail
大家都知道要補充膠原蛋白,但步入中年後的我,肌膚的變化不只是「流失變快」,連狀態也開始慢慢改變。 後來才明白,原來膠原蛋白的補充不只要「吃對」,更要「吃對時間」。 就像肌膚保養會分成早晚程序,膠原的補充其實也需要「分時」進行,才能更貼近需求,效果也更好。 BEAUTY CLUB 讓我養成了「早
Thumbnail
十幾年前,曾經突然去買了繪畫本 跟一整盒廣告原料 重點是,我不曾學過畫畫,也不會畫 隨著時間的推移 那些東西不知道被塞到哪去了 而到此時此刻 我還是沒辦法解釋那謎樣的行為 就在幾年前,無聊時就會拿著鉛筆畫呀畫著 看到喜歡的照片,也試圖想要畫出來 但就大概是簡單的線條框出了形狀 只能用慘不忍賭來形容
Thumbnail
十幾年前,曾經突然去買了繪畫本 跟一整盒廣告原料 重點是,我不曾學過畫畫,也不會畫 隨著時間的推移 那些東西不知道被塞到哪去了 而到此時此刻 我還是沒辦法解釋那謎樣的行為 就在幾年前,無聊時就會拿著鉛筆畫呀畫著 看到喜歡的照片,也試圖想要畫出來 但就大概是簡單的線條框出了形狀 只能用慘不忍賭來形容
Thumbnail
這個系列我將會記錄我從繪畫小白,一直變成V皮建模師的學習日記,如果有志也想成為電繪高手的,歡迎跟我一同成長。 龐大的學費 說真的,這跟課題真的讓我蠻煩惱的,因為未來我想要當一個V皮的建模師,以及3D動畫師。 但因為之前沒有什麼電腦繪圖的經驗,原本想說要去巨匠電腦學習的,沒想到要把繪畫及2DLive學
Thumbnail
這個系列我將會記錄我從繪畫小白,一直變成V皮建模師的學習日記,如果有志也想成為電繪高手的,歡迎跟我一同成長。 龐大的學費 說真的,這跟課題真的讓我蠻煩惱的,因為未來我想要當一個V皮的建模師,以及3D動畫師。 但因為之前沒有什麼電腦繪圖的經驗,原本想說要去巨匠電腦學習的,沒想到要把繪畫及2DLive學
Thumbnail
前面寫了二篇,零基礎 插畫自學的筆記:   插畫自學 - 1 插畫自學 - 2 這篇就來做個系列的完結篇吧 2016 年開始練習用鉛筆,素描各種小種物、日式風格的漫畫少女,累積到某個程度之後,開始想正式創建一個擬人化的角色,可以展示人的情緒,增加創作上的樂趣 由於 Beta 的插畫功力
Thumbnail
前面寫了二篇,零基礎 插畫自學的筆記:   插畫自學 - 1 插畫自學 - 2 這篇就來做個系列的完結篇吧 2016 年開始練習用鉛筆,素描各種小種物、日式風格的漫畫少女,累積到某個程度之後,開始想正式創建一個擬人化的角色,可以展示人的情緒,增加創作上的樂趣 由於 Beta 的插畫功力
Thumbnail
August 27th, 2022 第三堂課的主題是『善用插畫設計』。 Boris一樣開始提問大家:什麼是插畫? Boris補充說道:沒錯,插畫是一種應用藝術,是到處存在我們生活中的商業創作手法之一。從口罩上的圖案,飲料提袋上的花樣到帆布托特包,都是插畫的一種表現。
Thumbnail
August 27th, 2022 第三堂課的主題是『善用插畫設計』。 Boris一樣開始提問大家:什麼是插畫? Boris補充說道:沒錯,插畫是一種應用藝術,是到處存在我們生活中的商業創作手法之一。從口罩上的圖案,飲料提袋上的花樣到帆布托特包,都是插畫的一種表現。
Thumbnail
開始的起源: 改變從工慾善其事起: 我想開始,還差點什麼?
Thumbnail
開始的起源: 改變從工慾善其事起: 我想開始,還差點什麼?
Thumbnail
「我不會畫畫」、「我好羨慕會畫畫的人」。這些話我聽過無數次,對多數人來說,網路上那些真實的畫作、充滿個人風格的插圖總是離自己很遠,但是相信我,沒有人是天生就不會畫畫的。
Thumbnail
「我不會畫畫」、「我好羨慕會畫畫的人」。這些話我聽過無數次,對多數人來說,網路上那些真實的畫作、充滿個人風格的插圖總是離自己很遠,但是相信我,沒有人是天生就不會畫畫的。
Thumbnail
2018-2021三年繪畫成長之路,在這裏做一個小小總結。
Thumbnail
2018-2021三年繪畫成長之路,在這裏做一個小小總結。
Thumbnail
新手自學電繪該如何起步?從零基礎開局,一路摸索過來的心得。
Thumbnail
新手自學電繪該如何起步?從零基礎開局,一路摸索過來的心得。
Thumbnail
說到筆者第一次認識這個小傢伙,是在……回顧這些日子以來受到Canvas的照(ㄊㄨˊ)顧(ㄉㄨˊ),覺得有不少的細節和內容值得分享,甚至還能跨領域結合平面設計的部分,讓圖片更加生動,活靈活現,所以決定開始撰寫這一系列的文章,來從實作面教導大家如何操作Canvas
Thumbnail
說到筆者第一次認識這個小傢伙,是在……回顧這些日子以來受到Canvas的照(ㄊㄨˊ)顧(ㄉㄨˊ),覺得有不少的細節和內容值得分享,甚至還能跨領域結合平面設計的部分,讓圖片更加生動,活靈活現,所以決定開始撰寫這一系列的文章,來從實作面教導大家如何操作Canvas
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News