iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

成為Canvas Ninja ! ~ 理解2D渲染的精髓 系列

整體規劃是要探討canvas 的2D渲染環境在實務上的各種運用, 例如如何使用canvas 創建web端2D粒子系統等多種特效模擬的探究。

鐵人鍊成 | 共 31 篇文章 | 25 人訂閱 訂閱系列文 RSS系列文
DAY 11

Day11 - 物理模擬篇 - 彈跳球世界II - 成為Canvas Ninja ~ 理解2D渲染的精髓

繼上一篇我們講到向量類的建立,接著我們在這一篇文機會提到反射行為的模擬~ 反射這種行為,在反射面為鉛直或水平時比較單純,所以大部分的Canvas彈跳球動畫教程都...

2021-09-26 ‧ 由 Mizok 分享
DAY 12

Day12 - 物理模擬篇 - 彈跳球世界III - 成為Canvas Ninja ~ 理解2D渲染的精髓

我們在上一次講到用數理觀點來觀察反射行為的諸多細節,而這篇文則是要講解斜向拋射。 不過因為斜向拋射的概念其實不是挺複雜,所以為了不要浪費篇幅,我也會先把一些程式...

2021-09-27 ‧ 由 Mizok 分享
DAY 13

Day13 - 物理模擬篇 - 彈跳球世界IV - 成為Canvas Ninja ~ 理解2D渲染的精髓

終於來到彈跳球的最後一部分~ 這篇我們主要就是要講解傾斜面存在的狀況下,程式的撰寫方法! 老實說我原本是打算在一篇文內把傾斜面的範例處理完畢的。 但是因為碰上一...

2021-09-28 ‧ 由 Mizok 分享
DAY 14

Day14 - 物理模擬篇 - 彈跳球世界IV(補完篇) - 成為Canvas Ninja ~ 理解2D渲染的精髓

沒錯~我就硬是不要給把標題打成『彈跳球世界V』,咬我啊~ 這篇是斜面碰撞的後篇~ 今天要來補完我們在上一篇沒有解決掉的reposition 和反射速度運算的...

2021-09-29 ‧ 由 Mizok 分享
DAY 15

Day15 - 中場休息時間 - 來看看htmlToCanvas的實作吧 - 成為Canvas Ninja ~ 理解2D渲染的精髓

經過了連續5篇複雜度略高的物理模擬系列,我在想看官們多少會有點疲乏~ 所以我在規劃了幾篇『中場休息』系列科普文,用來穿插在主要的chapter之間, 休息是為...

2021-09-30 ‧ 由 Mizok 分享
DAY 16

Day16 - 物理模擬篇 - 彈力、引力與磁力I - 成為Canvas Ninja ~ 理解2D渲染的精髓

經過一天的休息,我們又再度回到了物理模擬的世界~ 我們在這次的chapter要來介紹的是彈力、張力、引力與磁力這種物體之間~與距離相關的作用力的演算方法。 首先...

2021-10-01 ‧ 由 Mizok 分享
DAY 17

Day17 - 物理模擬篇 - 彈力、引力與磁力II - 成為Canvas Ninja ~ 理解2D渲染的精髓

在上一篇文中我們提到了一維彈力模擬的案例 這次我們則是要實作二維彈力模擬~並且是存在重力場的狀態! 原則上原理是不會有太大的差異,我們這邊再複習一下模擬程序1幀...

2021-10-02 ‧ 由 Mizok 分享
DAY 18

Day18 - 物理模擬篇 - 彈力、引力與磁力III - 成為Canvas Ninja ~ 理解2D渲染的精髓

二維彈性模擬(第二部分) 我們在上一篇文做完了整體案例場景的搭建,而我們接下來則是要把後續的物理運算做完~ 簡單用圖片講解一下這個案例的物理模型 : 畫面中每...

2021-10-03 ‧ 由 Mizok 分享
DAY 19

Day19 - 中場休息時間 - 怎麼樣用Canvas精準的寫出一個『字』 - 成為Canvas Ninja ~ 理解2D渲染的精髓

呃,首先呢~ 敝人小弟在下我今天仔細的思考了一下,決定這次還是再來一篇『中場休息』科普文,等到明天再來繼續磁力/引力的部分 其實是因為剛好工作應接不暇來不及寫...

2021-10-04 ‧ 由 Mizok 分享
DAY 20

Day20 - 物理模擬篇 - 彈力、引力與磁力IV - 成為Canvas Ninja ~ 理解2D渲染的精髓

磁力/引力模擬 彈力、磁力和引力其實本質上很接近。 之所以說相近,是因為他們都是一種長距離作用力。 彈簧在被壓縮的狀況下會產生擴張的力量,而在拉長的狀況下則會進...

2021-10-05 ‧ 由 Mizok 分享