鐵人檔案
上上一屆曾經挑戰過HTML5的主題，不過都只是粗淺的嘗試。這次希望能藉由鐵人賽的機會，把有興趣的應用實作出來。
要製作一個簡單的繪圖應用，自由塗鴉應該是最基本的功能之一。所以就先來看一下怎麼做出來。 塗鴉其實只使用到2D Context的幾個操作方法，主要是lineTo與...
今天先建立一個可以比較彈性加入繪圖功能的機制，然後先嘗試塗鴉及長方形繪製來驗證這個機制。 主要的方向是，利用一個物件來集中管理2D Context的屬性及繪圖方...
只能畫長方形其實有點無趣，至少加上圓形跟橢圓形才能讓圖形更完整。另外，為了顯示一些繪圖工具的狀態，加入了自定事件的機制。 圓形用2D Context的arc方法...
2D Context具備了基本的文字繪製功能，不過想要做成在Canvas可以直接打字的效果，還是需要花一些功夫嘗試。 雖然2D Context具備了文字繪製功能...
之前的程式碼看起來有些凌亂，所以稍微停下腳步，整理一下。 其實本來其實想自己實作AMD(Asynchronous Module Define)，不過時間來不及，...
今天先思考一下，要把Canvas與WebSocket整合的話，需要怎樣的技術。順便調整一下之前寫好的Chat伺服器程式，以他為base來接上WebSocket。...
之前針對白板塗鴉的需求，做好基本的抽象化。不過要利用從WebSocket傳來的資料繪圖，就需要進一步考慮。 在繪圖上，一個共享白板的技術需求主要有幾個重點：...
單人操作白板，或是在瀏覽器間交錯操作，對運作的影響都不太大，但是我們要做的是多人同時操作，這時會發生什麼事呢？ 昨天其實只試做出一個透過WebSocket協同運...
昨天發現了在多人協同繪圖時，會有無法解決的問題。問題主要在於繪圖的動作與WYSIWYG的需求不一致，導致動作的衝突無法解決。要解決這樣的衝突，方法之一就是用兩個...
線上會議的應用，除了需要像是視訊、Chat等的機制外，通常也會需要做一些資源分享。先來考慮一下需求，然後看看怎樣實作。 基本上，這裡說的資源共享，主要還是檔案。...
