Html5用Canvas制作畫圖闆

需求：

1. 繪制多邊形
2. 可填充顔色
3. 可設定文字
4. 可移動，可删除
5. 滑鼠按住後，擡起之前線段應該尾随滑鼠目前位置
6. 可與背景友善的進行資料互動，儲存到背景，或将資料從背景取到前台顯示對應的圖形

思考：

1. 第一想到的是找現成的改一改，找來找去，就認為fabricjs還能夠，隻是研究了一下，發現樣例太少，非常難短時間内上手
2. 想到了近期一直想研究确沒時間看的Html5，正巧之前也買了一本關于Canvas遊戲開發的書，想試試看，沒想到非常快就上手了

結果：

一天半時間完畢，效果例如以下：

注意：

1. 不要使用style或者css對canvas的width和height設定值，否則會引起坐标等被放大的問題
2. 使用jquery擷取canvas的時候要使用 “$('#canvas').get(0)”，否則則取不到對應的對象
3. 調色闆使用的是“spectrum.js”
4. 取值指派採用json模式，使用過的是“jquery.json-2.4.js”
5. 採用json指派的時候，由于我對圖形進行了js封裝類，且帶有自己定義方法，是以在指派的時候會出現不認自己定義方法的問題，原由于解析json的時候，對象會被解析為object而不是我定義的對象，是以須要人為處理一下
6. 所有代碼+HTML一共600行，這在曾經是我全然不敢想象的，HTML5會帶給我們如何的未來呢？值得期待。