題外話 補充昨天忘記下的結論：不管要繪製的圖案多大，都建議畫(儲存)在一個和原圖一樣大的canvas上，取代原本的圖案，當作未來的繪製來源。 let leafI...
磁力/引力模擬 彈力、磁力和引力其實本質上很接近。 之所以說相近，是因為他們都是一種長距離作用力。 彈簧在被壓縮的狀況下會產生擴張的力量，而在拉長的狀況下則會進...
Fabricjs 官方文檔 Fabric.js is a powerful and simpleJavascript HTML5 canvas library...
樹葉問題 先前在第三章畫樹時，就有發現把樹葉畫上去時，系統工作時間會增加而導致掉偵，原圖是300x300，50kb左右，不是很大，但是我們要畫一大堆落葉的話，計...
呃，首先呢~ 敝人小弟在下我今天仔細的思考了一下，決定這次還是再來一篇『中場休息』科普文，等到明天再來繼續磁力/引力的部分 其實是因為剛好工作應接不暇來不及寫...
提醒：本篇承接第三章 讓我們說回那顆樹 既然樹是我們遊戲場景的主體之一，首先當然是要來整修一下我們的樹，此時我意外發現有個很讚的教學影片：Fractal T...
二維彈性模擬(第二部分) 我們在上一篇文做完了整體案例場景的搭建，而我們接下來則是要把後續的物理運算做完~ 簡單用圖片講解一下這個案例的物理模型 : 畫面中每...
前述 接續昨天做的『文字換行』，今天利用上一篇的操作來做一個應用，這次的應用靈感是從這個網站來的，滑到最下方，有一個填上文字、修改位置與大小，就可以下載成為賀卡...
前言 其實我算蠻容易分心的，說好要搞流程圖，結果都在打code；說好要做遊戲，結果都在搞動畫；雖然列了大綱，中途還是更換了幾個主題，臨時起意去畫樹，不過，這樣的...
在上一篇文中我們提到了一維彈力模擬的案例 這次我們則是要實作二維彈力模擬～並且是存在重力場的狀態! 原則上原理是不會有太大的差異，我們這邊再複習一下模擬程序1幀...
程式碼 今天來學習文字換行 export default function App() { const canvasRef = useRef(null);...
經過一天的休息，我們又再度回到了物理模擬的世界~ 我們在這次的chapter要來介紹的是彈力、張力、引力與磁力這種物體之間～與距離相關的作用力的演算方法。 首先...
今天挑戰半小時寫完一篇文章(被打，其實我寫完程式了，把文章撰寫出來就好嚕。 https://jerry-the-potato.github.io/Chapt...
經過了連續5篇複雜度略高的物理模擬系列，我在想看官們多少會有點疲乏~ 所以我在規劃了幾篇『中場休息』系列科普文，用來穿插在主要的chapter之間， 休息是為...
一樣先上圖! https://jerry-the-potato.github.io/Chapter4-demo3/ Staring（因為像星星一樣繞行） 有了前...
沒錯~我就硬是不要給把標題打成『彈跳球世界V』，咬我啊～ 這篇是斜面碰撞的後篇~ 今天要來補完我們在上一篇沒有解決掉的reposition 和反射速度運算的...
關於前面的小畫家 復刻小畫家先做到昨天作為最後一篇，接下來會帶各位，利用前其所學的功能，製作各種canvas 互動小東西！敬請期待。 這邊也附上前面的所製作的...
今天西子灣被斷網了，所以沒時間打太多字，請見諒，有看不懂的留言詢問哦!https://jerry-the-potato.github.io/Chapter4-d...
終於來到彈跳球的最後一部分～ 這篇我們主要就是要講解傾斜面存在的狀況下，程式的撰寫方法! 老實說我原本是打算在一篇文內把傾斜面的範例處理完畢的。但是因為碰上一些...
說明 在選擇剪下時，我們可以建立一個新的 canvas來建立我們所剪下的內容 /** * 滑鼠點下畫布 */ const handleMou...
本篇銜接上篇：https://ithelp.ithome.com.tw/articles/10272738 該如何讓動畫更自然？ 今天來深入聊聊怎麼調節動畫...
說明 ctx.font = "30px sans-serif" //文字字型 大小 ctx.fillStyle="#00A0E9&...
我們在上一次講到用數理觀點來觀察反射行為的諸多細節，而這篇文則是要講解斜向拋射。不過因為斜向拋射的概念其實不是挺複雜，所以為了不要浪費篇幅，我也會先把一些程式的...
題外話 昨天沒把樹葉畫上去，還是心癢癢的，所以動手簡單裝飾了一下這棵樹：https://jerry-the-potato.github.io/Chapter3-...
繼上一篇我們講到向量類的建立，接著我們在這一篇文機會提到反射行為的模擬~反射這種行為，在反射面為鉛直或水平時比較單純，所以大部分的Canvas彈跳球動畫教程都是...
方法一 此多邊形方法雖然不是小畫家的畫法，但一樣可以達成多邊形的做法，如下： /** * 滑鼠點下畫布 */ const handleMou...
昨天發完文後，覺得對於演算法還是心有不甘，便上網搜尋了一下，雖然沒直接給到答案，間接的給了我一些大膽的想法。 具體參考的是這篇：https://ithelp.i...
作為物理模擬開場的第一進程，當然就要來講一下最經典的物理模擬案例:『彈跳球』～其實很多國外的Canvas特效教程都會把這一篇當成第一個介紹案例，比方說 MD...
先補上Demo 將前兩天畫好的樹枝骨幹，搭配第二章學的動畫效果，就能讓樹開始擺動了：https://jerry-the-potato.github.io/Cha...
OK, 我們終於來到了基礎篇最後的部分，也就是Canvas動畫~!(撒花) 在這個部分，我們會介紹： canvas實作動畫的原理 一個簡易動畫的實作案例...
jerrythepotato
Mizok
雪莉
iThome鐵人賽
看影片追技術