資訊專欄INFORMATION COLUMN
摘要：所以在此次開發中，嘗試了小步快跑快速迭代的方法。開發，不僅是在開發運用上的提升，還是一個開源項目的完整實踐。由于時間原因，在開發完基礎版本后就去做別的項目。所以，好的文檔是項目的開門鑰匙。兩個項目相輔相成。
歡迎交換友鏈： laker.me--進擊的程序媛涉及的兩個項目
Github：https://github.com/younglaker
V信: lakerHQ （請注明‘來自博客’）
Pixler：一個用于設計像素圖片（拼豆）的應用。
Easycanvas.js： Canvas 繪圖庫
開發背景我對拼豆感興趣，在做拼豆前要設計圖紙，類似畫像素圖。我試用了網上能搜到的幾個拼豆圖紙設計的應用，但是沒有適合我的，我就想著自己開發一個。
算法原理拼豆圖紙就類似于像素圖，我剛開始構思如何開發的時候，想著它有點像下棋。所以我參考了五子棋的下棋原理。我在五子棋的算法上優化了鼠標點擊時落腳的位置的計算方法，即鼠標點擊時，獲取點擊位置，計算出它處于哪個方格中，在那個方格中畫上一個像素點，用一個二維數組記錄方格中已繪制的位置。這就完成了初步的拼豆像素圖的算法設計。
在以往的開發中，我都要求每一步都精益求精，導致整體進度緩慢，常常停留在初步階段，就把自己繞暈。所以在此次開發中，嘗試了小步快跑、快速迭代的方法。
第一版：快速開發第一版本開發的時候，我盡量減少對性能、代碼優化的思考，在最快的速度完成基本功能，也就是如何繪制像素點和刪除像素圖。
這樣沒有束縛的情況下，只需要集中精力完成功能的算法，很快就實現基本功能。
當然，代碼也是很簡單粗暴的，就需要第二版的完善。
第二版：性能和代碼優化首先，把畫布分為兩層，一層是參考線畫布，一層是繪圖畫布。參考線畫布在初始化后就不需要修改，所有操作只需要在繪圖畫布上進行，減少了繪圖時候的工作量。
然后，把通用功能的代碼封裝成公共函數，減少冗余。
第三版：封裝繪圖庫，并在應用中不斷完善Pixler 主要代碼是 Canvas 繪圖，所以可以把 Canvas 主要繪圖功能封裝一下，多帶帶成一個繪圖庫，減少主代碼冗余，也方便在其他項目中引用。
在大學期間，我研究 jQuery 的時候就仿著寫了一個鏈式結構的 JavaScript 框架 Oct.js，加上第一、第二版本對 Canvas 接口的熟悉，所以開發起來并不困難。但在接口設計上重復弄了幾次，這部分的經驗我也寫了一篇文章 《EasyCanvas：連續畫圖的一些總結》 記錄了一下。
開發 Easycanvas.js，不僅是在 JavaScript 開發、Canvas 運用上的提升，還是一個開源項目的完整實踐。期間有一個小伙伴加入參與了合作，可惜沒參與太多功能就退出了，但還是一次很好的開源項目的體驗。
在開發代碼的過程中，還編寫了相關的文檔。接口不斷優化修改，文檔也不斷的調整，就連文檔格式也做了多次調整，工作量是不小，但也不厭其煩。
由于時間原因，在開發完 Easycanvas.js 基礎版本后就去做別的項目。間隔一段時間回來再看，基本沒有有最初開發時候的熟悉感，這就得靠我之前寫的文檔了。所以，好的文檔是項目的開門鑰匙。
就這樣，我像一個剛接觸這個繪圖庫的用戶一樣，參照文檔，把 Easycanvas.js 重構了 Pixler 的繪圖代碼。同時，在應用的過程中發現了 Easycanvas.js 的不足，又反過來進行完善。兩個項目相輔相成。
小結相比之前開發的 Oct.js，只有開發和單元測試，并沒有大規模地應用到實際項目中（我也嘗試過，但一旦項目做大，就涉及到 jQuery 插件 ，就不得不引入 jQuery，就和 Oct.js 重復了，就只好把 Oct.js 刪掉）。
所以，這次 Pixler 和 Easycanvas.js 的開發，從0到1再到100，是一個很好的經歷。不僅是編程技能上的提升，還是項目管理上積累了經驗。
至此 Pixler 和 Easycanvas.js 完成了一個較為穩定的版本，但還有很大的提升空間，我都一一記錄在 Todolist 上了，等我一一突破。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/95202.html
摘要：在彈一彈游戲中，小球不能向上發射。這里又有一個坑彈一彈游戲中，剛射擊出去的小球是不受重力影響的不然瞄準還有什么意義。 前言 半年前用js和canvas仿了熱血傳奇網游（地址），基本功能寫完之后，剩下的都是堆數據、堆時間才能完成的任務了，沒什么新鮮感，因此進度極慢。這次看到微信《彈一彈》比較火，因為涉及到物理引擎（為了真實），于是動手試了一下。一共用了10個小時，不僅完成了這個demo，...
摘要：游戲開發實戰主要講解使用來開發和設計各類常見游戲的思路和技巧，在介紹相關特性的同時，還通過游戲開發實例深入剖析了其內在原理，讓讀者不僅知其然，而且知其所以然。HTML5 Canvas游戲開發實戰主要講解使用HTML5 Canvas來開發和設計各類常見游戲的思路和技巧，在介紹HTML5 Canvas相關特性的同時，還通過游戲開發實例深入剖析了其內在原理，讓讀者不僅知其然，而且知其所以然。在本書...
摘要：什么是是一個基于創建的簡單高性能和跨平臺的股票數據可視化開源項目。支持以及和等平臺。而針對股票等有價證劵特定的圖表庫有和等項目，這些圖表庫對股票繪圖已經做了一些非常專業的處理及優化了，但是他們均基于來繪圖。 什么是 ClChart？ ClChart是一個基于canvas創建的簡單、高性能和跨平臺的股票數據可視化開源項目。支持PC、webApp以及React Native和Weex等平臺...
摘要：什么是是一個基于創建的簡單高性能和跨平臺的股票數據可視化開源項目。支持以及和等平臺。而針對股票等有價證劵特定的圖表庫有和等項目，這些圖表庫對股票繪圖已經做了一些非常專業的處理及優化了，但是他們均基于來繪圖。 什么是 ClChart？ ClChart是一個基于canvas創建的簡單、高性能和跨平臺的股票數據可視化開源項目。支持PC、webApp以及React Native和Weex等平臺...
閱讀 1594·2021-11-16 11:44
閱讀 7483·2021-09-22 15:00
閱讀 4507·2021-09-02 10:20
閱讀 1952·2021-08-27 16:20
閱讀 2397·2019-08-26 14:00
閱讀 2912·2019-08-26 11:44
閱讀 1644·2019-08-23 18:33
閱讀 1865·2019-08-22 17:28
