初識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
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
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
Thumbnail
是否有過臨時需要一個新的技能,卻無法及時派上用場?是否發現一個新事物,迫不急待想在短時間內學會它? 
Thumbnail
是否有過臨時需要一個新的技能,卻無法及時派上用場?是否發現一個新事物,迫不急待想在短時間內學會它? 
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News