iT邦幫忙

2d相關文章
共有 31 則文章
鐵人賽 Modern Web DAY 30

技術 目錄頁 : 成為Canvas Ninja ~ 理解2D渲染的精髓

Day1 - 序言 - 成為Canvas Ninja ~ 理解2D渲染的精髓 基礎篇 Day2 - Canvas基礎概論 I - 成為Canvas Ninja...

鐵人賽 Modern Web DAY 30

技術 Day 30 - 3D繪圖篇 - 噪聲地形演算II - 成為Canvas Ninja ~ 理解2D渲染的精髓

這是我最後的波紋了。 其實我一直想試著講一次這句話(X) 首先來丟一張案例完成後的圖片~ 大家應該多少有看過這種類型的圖樣,最常見的應該就是在遊戲的3D場...

鐵人賽 Modern Web DAY 29

技術 Day 29 - 3D繪圖篇 - 噪聲地形演算I - 成為Canvas Ninja ~ 理解2D渲染的精髓

再兩天 ~!! 在鐵人賽的最後,我想要給各位帶來的是噪聲地形的演算~ 之所以想要寫這個題目,原因是因為這個題目也可以承接我們上一篇講的內容(透視投影), 而...

鐵人賽 Modern Web DAY 28

技術 Day 28 - 3D繪圖篇 - 2D圖片上面的3D物件是怎麼產生的?II - 成為Canvas Ninja ~ 理解2D渲染的精髓

離賽程結束還有3天~ 今天我們要來延續昨天的問題探討~ 我在上一篇似乎沒有把問題描述的很好,所以可能大家蠻confused的 :( 我這邊再仔細的講講這個...

鐵人賽 Modern Web DAY 27

技術 Day 27 - 3D繪圖篇 - 2D圖片上面的3D物件是怎麼產生的? I - 成為Canvas Ninja ~ 理解2D渲染的精髓

鐵人賽終於也進入尾聲了~ (加上今天還剩下4天) 我們也終於來到規劃中最後的篇章 --- 3D繪圖篇 而我們今天要討論的題目是 ~『2D圖片上面的3D圖樣是怎...

鐵人賽 Modern Web DAY 26

技術 Day 26 - 影像處理篇 - 用Canvas實作在IE上也可運行的模糊濾鏡II - 成為Canvas Ninja ~ 理解2D渲染的精髓

在這篇文章中,我們要來實作上一篇提到的圖像模糊演算法~ 在開始之前,因為有個小狀況是上一篇文中我們沒有提到的,我們要先稍微講解一下 --- 也就是邊緣像素的處...

鐵人賽 Modern Web DAY 25

技術 Day 25 - 影像處理篇 - 用Canvas實作在IE上也可運行的模糊濾鏡I - 成為Canvas Ninja ~ 理解2D渲染的精髓

在這一篇我們要來講一些比較進階的內容。 那就是圖像模糊演算法~ 大部分有Debug過IE的人應該都知道,IE是不支援css的filter屬性的。 但是很多時候設...

鐵人賽 Modern Web DAY 24

技術 Day 24 - 影像處理篇 - 用Canvas實作動態綠幕摳像 - 成為Canvas Ninja ~ 理解2D渲染的精髓

上一篇我們提到我們接著要開始玩一些比較有趣的實作~ 所以我們就來講講怎麼在web端實作綠幕摳像(Green Screen Keying)~ 什麼是綠幕摳像?...

鐵人賽 Modern Web DAY 23

技術 Day 23 - 影像處理篇 - 影像與色彩 - 成為Canvas Ninja ~ 理解2D渲染的精髓

老實說我決定要寫影像處理這個部分的時候還蠻猶豫的,因為在javascript 做影像處理的這個領域,IT邦之前其實就有蠻多寫的蠻不錯的文章。 例如第11屆鐵人賽...

鐵人賽 Modern Web DAY 22

技術 Day 22 - 物理模擬篇 - 二維布料模擬 - 成為Canvas Ninja ~ 理解2D渲染的精髓

時間過得很快,這邊我們已經來到物理模擬篇的最後一節 ~ 二維布料模擬了。 原本其實我是打算把這一篇放在彈性模擬後面做講解,因為這個案例其實就是上位版本的彈性模擬...

鐵人賽 Modern Web DAY 21

技術 Day 21 - 物理模擬篇 - 原生Canvas建構粒子系統 - 成為Canvas Ninja ~ 理解2D渲染的精髓

在開始之前,我可能需要先給各位科普一些基礎的CG動畫(Computer Graphic)常識~也就是我們這個chapter 的主角粒子(Particles) 什...

鐵人賽 Modern Web DAY 20

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

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

鐵人賽 Modern Web DAY 19

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

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

鐵人賽 Modern Web DAY 18

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

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

鐵人賽 Modern Web DAY 17

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

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

鐵人賽 Modern Web DAY 16

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

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

鐵人賽 Modern Web DAY 15

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

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

鐵人賽 Modern Web DAY 14

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

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

鐵人賽 Modern Web DAY 13

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

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

鐵人賽 Modern Web DAY 12

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

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

鐵人賽 Modern Web DAY 11

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

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

鐵人賽 Modern Web DAY 10

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

作為物理模擬開場的第一進程,當然就要來講一下最經典的物理模擬案例:『彈跳球』~ 其實很多國外的Canvas特效教程都會把這一篇當成第一個介紹案例,比方說 M...

鐵人賽 Modern Web DAY 9

技術 Day9 - 2D渲染環境基礎篇 V[Canvas動畫概論] - 成為Canvas Ninja ~ 理解2D渲染的精髓

OK, 我們終於來到了基礎篇最後的部分,也就是Canvas動畫~!(撒花) 在這個部分,我們會介紹: canvas實作動畫的原理 一個簡易動畫的實作案例...

鐵人賽 Modern Web DAY 8

技術 Day8 - 2D渲染環境基礎篇 IV[像素操作概論] - 成為Canvas Ninja ~ 理解2D渲染的精髓

『像素操作(Pixel Manipulation)』 顧名思義就是要去以單一像素為最小單位來進行操作,而就像我們透過JS改變DOM結構所進行的『DOM操作』一樣...

鐵人賽 Modern Web DAY 7

技術 Day7 - 2D渲染環境基礎篇 III[ 變形與陣列運算 ] - 成為Canvas Ninja ~ 理解2D渲染的精髓

之前我們有提到過,canvas其實本身可以看做一群像素形成的2維陣列,而Canvas的圖像變形,其實就是對canvas自身做的一種陣列運算。 高中讀理組的同學可...

鐵人賽 Modern Web DAY 6

技術 Day6 - 2D渲染環境基礎篇 II [同場加映 - 非零纏繞與奇偶規則] - 成為Canvas Ninja ~ 理解2D渲染的精髓

路徑繪製常令人感到疑惑的點 - 非零纏繞與奇偶規則 初學路徑繪製的時候,大部分人應該會發現一種讓人疑惑的狀況。 那就是當繪製的路徑稍微複雜一點且路徑線段產生交錯...

鐵人賽 Modern Web DAY 5

技術 Day5 - 2D渲染環境基礎篇 II - 成為Canvas Ninja ~ 理解2D渲染的精髓

何謂路徑? 要介紹路徑繪圖相關的api之前,必須要先理解什麼叫做『路徑』。 有學過電腦繪圖軟體,例如Adobe Photoshop, Adobe Illustr...

鐵人賽 Modern Web DAY 4

技術 Day4 - 2D渲染環境基礎篇 I - 成為Canvas Ninja ~ 理解2D渲染的精髓

進入2D渲染的世界 我們在前面的章節有提到,任何Canvas的相關程序,起手式必定是先取得渲染環境,所以2D渲染程序的第一步當然也就是先取得2D得渲染環境...

鐵人賽 Modern Web DAY 3

技術 Day3 - Canvas基礎概論 II - 成為Canvas Ninja ~ 理解2D渲染的精髓!

Some Deeper Basics 圖像的概念 我們在前面有說到,canvas本身是透過物件模型來繪製圖像,但是我們沒有提到何謂"圖像"。...

鐵人賽 Modern Web DAY 2

技術 Day2 - Canvas基礎概論 I - 成為Canvas Ninja ~ 理解2D渲染的精髓

Let's Start From Scratch 本系列文章的頭幾篇我決定還是帶點基礎的東西,但是我又不想講一些太過common sense 的東西,所以這邊我...