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

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


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

...

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


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


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

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


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




留言
avatar-img
Jerry The Potato的沙龍
3會員
2內容數
你可能也想看
Thumbnail
賽勒布倫尼科夫以流亡處境回望蘇聯電影導演帕拉贊諾夫的舞台作品,以十段寓言式殘篇,重新拼貼記憶、暴力與美學,並將審查、政治犯、戰爭陰影與「形式即政治」的劇場傳統推到台前。本文聚焦於《傳奇:帕拉贊諾夫的十段殘篇》的舞台美術、音樂與多重扮演策略,嘗試解析極權底下不可言說之事,將如何成為可被觀看的公共發聲。
Thumbnail
賽勒布倫尼科夫以流亡處境回望蘇聯電影導演帕拉贊諾夫的舞台作品,以十段寓言式殘篇,重新拼貼記憶、暴力與美學,並將審查、政治犯、戰爭陰影與「形式即政治」的劇場傳統推到台前。本文聚焦於《傳奇:帕拉贊諾夫的十段殘篇》的舞台美術、音樂與多重扮演策略,嘗試解析極權底下不可言說之事,將如何成為可被觀看的公共發聲。
Thumbnail
柏林劇團在 2026 北藝嚴選,再次帶來由布萊希特改編的經典劇目《三便士歌劇》(The Threepenny Opera),導演巴里・柯斯基以舞台結構與舞台調度,重新向「疏離」進行提問。本文將從觀眾慾望作為戲劇內核,藉由沉浸與疏離的辯證,解析此作如何再次照見觀眾自身的位置。
Thumbnail
柏林劇團在 2026 北藝嚴選,再次帶來由布萊希特改編的經典劇目《三便士歌劇》(The Threepenny Opera),導演巴里・柯斯基以舞台結構與舞台調度,重新向「疏離」進行提問。本文將從觀眾慾望作為戲劇內核,藉由沉浸與疏離的辯證,解析此作如何再次照見觀眾自身的位置。
Thumbnail
本文深入解析臺灣劇團「晃晃跨幅町」對易卜生經典劇作《海妲.蓋柏樂》的詮釋,從劇本歷史、聲響與舞臺設計,到演員的主體創作方法,探討此版本如何讓經典劇作在當代劇場語境下煥發新生,滿足現代觀眾的觀看慾望。
Thumbnail
本文深入解析臺灣劇團「晃晃跨幅町」對易卜生經典劇作《海妲.蓋柏樂》的詮釋,從劇本歷史、聲響與舞臺設計,到演員的主體創作方法,探討此版本如何讓經典劇作在當代劇場語境下煥發新生,滿足現代觀眾的觀看慾望。
Thumbnail
《轉轉生》為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,融合舞蹈、音樂、時尚和視覺藝術,透過身體、服裝與群舞結構,回應殖民歷史、城市經驗與祖靈記憶的交錯。本文將從服裝設計、身體語彙與「輪迴」的「誕生—死亡—重生」結構出發,分析《轉轉生》如何以當代目光,形塑去殖民視角的奈及利亞歷史。
Thumbnail
《轉轉生》為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,融合舞蹈、音樂、時尚和視覺藝術,透過身體、服裝與群舞結構,回應殖民歷史、城市經驗與祖靈記憶的交錯。本文將從服裝設計、身體語彙與「輪迴」的「誕生—死亡—重生」結構出發,分析《轉轉生》如何以當代目光,形塑去殖民視角的奈及利亞歷史。
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
新手自學電繪該如何起步?從零基礎開局,一路摸索過來的心得。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News