iT邦幫忙

鐵人檔案

2012 iT 邦幫忙鐵人賽
回列表

且戰且走HTML5 系列

鐵人鍊成 | 共 30 篇文章 | 43 人訂閱 訂閱系列文
DAY 11

且戰且走HTML5(11) Canvas基本繪圖-塗鴉

要製作一個簡單的繪圖應用,自由塗鴉應該是最基本的功能之一。所以就先來看一下怎麼做出來。 塗鴉其實只使用到2D Context的幾個操作方法,主要是lineTo與...

2012-10-19 ‧ 由 fillano 分享
DAY 12

且戰且走HTML5(12) Canvas基本繪圖-圖形

今天先建立一個可以比較彈性加入繪圖功能的機制,然後先嘗試塗鴉及長方形繪製來驗證這個機制。 主要的方向是,利用一個物件來集中管理2D Context的屬性及繪圖方...

2012-10-20 ‧ 由 fillano 分享
DAY 13

且戰且走HTML5(13) Canvas基本繪圖-更多圖形

只能畫長方形其實有點無趣,至少加上圓形跟橢圓形才能讓圖形更完整。另外,為了顯示一些繪圖工具的狀態,加入了自定事件的機制。 圓形用2D Context的arc方法...

2012-10-21 ‧ 由 fillano 分享
DAY 14

且戰且走HTML5(14) Canvas基本繪圖-打字

2D Context具備了基本的文字繪製功能,不過想要做成在Canvas可以直接打字的效果,還是需要花一些功夫嘗試。 雖然2D Context具備了文字繪製功能...

2012-10-22 ‧ 由 fillano 分享
DAY 15

且戰且走HTML5(15) Canvas基本繪圖-架構調整

之前的程式碼看起來有些凌亂,所以稍微停下腳步,整理一下。 其實本來其實想自己實作AMD(Asynchronous Module Define),不過時間來不及,...

2012-10-23 ‧ 由 fillano 分享
DAY 16

且戰且走HTML5(16) Canvas與Websocket整合

今天先思考一下,要把Canvas與WebSocket整合的話,需要怎樣的技術。順便調整一下之前寫好的Chat伺服器程式,以他為base來接上WebSocket。...

2012-10-24 ‧ 由 fillano 分享
DAY 17

且戰且走HTML5(17) 將Canvas繪圖進一步抽象

之前針對白板塗鴉的需求,做好基本的抽象化。不過要利用從WebSocket傳來的資料繪圖,就需要進一步考慮。 在繪圖上,一個共享白板的技術需求主要有幾個重點:...

2012-10-25 ‧ 由 fillano 分享
DAY 18

且戰且走HTML5(18) 再看多人協同運作

單人操作白板,或是在瀏覽器間交錯操作,對運作的影響都不太大,但是我們要做的是多人同時操作,這時會發生什麼事呢? 昨天其實只試做出一個透過WebSocket協同運...

2012-10-26 ‧ 由 fillano 分享
DAY 19

且戰且走HTML5(19) 解決繪圖的多人協同運作問題

昨天發現了在多人協同繪圖時,會有無法解決的問題。問題主要在於繪圖的動作與WYSIWYG的需求不一致,導致動作的衝突無法解決。要解決這樣的衝突,方法之一就是用兩個...

2012-10-27 ‧ 由 fillano 分享
DAY 20

且戰且走HTML5(20) 資源共享

線上會議的應用,除了需要像是視訊、Chat等的機制外,通常也會需要做一些資源分享。先來考慮一下需求,然後看看怎樣實作。 基本上,這裡說的資源共享,主要還是檔案。...

2012-10-28 ‧ 由 fillano 分享