最近因為工作需要做了點HTML5可視化研究如下
為什麽沒有字體顏色作為壹個設計師很不爽
第壹次發文有寫錯的地方還請諸位高手多多包涵
設想，要在頁面中生成大量的簡單圖形，比如10萬個方塊，並對它們進行拖拽操作。
基本思路有三種方式，傳統Div，Svg，與Canvas。
為了加拖拽，暫時沒有用canvas。
因為canvas無法生成dom節點，不存在id這種屬性，需要通過判斷鼠標位置來獲取元素再進行操作。雖然寫個isMouseinObj()的function也不是不行，但總覺得以後針對某對象單獨處理會夜長夢多（主要還是懶）。。。不過從生成圖形角度講，canvas理論上是最快的。
因為貪生怕死擔心Dom過多死機，準備先分區生成方塊，於是：
壹個簡圖，整體劃分如下，設兩個input框的值分別為m, n，每個藍塊包括n個綠塊。點擊每個藍塊可在下方生成n個綠塊。
點擊GenAll可壹次性生成m*n個綠塊。點擊Drag可對綠塊進行拖拽。
模擬開始。
首先是用div模擬方塊。因為比較熟悉寫起來也簡單。
Div的拖拽方式可以分成兩種。
Jquery-ui的draggble還有很多其他參數，請參考api文檔。
現在假定壹種新情形：綠色方塊只能拖拽到虛線框之內。
默認情況下，Html元素均不可拖拽，所以需要設置拖拽元素的draggable屬性為true。同時，默認無法將元素放置到其他元素中，所以需要event.preventDefault()設置允許放置。
本例中，為class為abox的綠方塊添加draggable。
為class為wrap的虛線框添加preventDefault。
之後通過dataTransfer傳輸數據，實現box的移動。
由於Svg也是直接在Html中生成Dom節點，理論上Div所能實現的功能它都可以實現，並且繪圖效果更佳。
然後生成Svg元素，並設置其屬性。
循環生成Svg方塊並添加拖拽屬性。
但這種方式有個問題，就是——慢。當生成僅10000個方塊時，效率便低的不可估量。
然而Svg無法應用Html5原生的Drag and Drop事件。
相比於引用插件，這樣的效率提高了不少。
從結果上看，在數量少時，針對方塊這種簡單圖形的簡單操作Div和Svg均可勝任。然而設置了總***生成100000個方塊，發現單從生成的角度，Svg的渲染用時大約是Div的1/2（這裏指Dom中直接繪制Svg而非通過js插件繪制Svg）。
加上拖拽功能後，用Html5原生拖放事件的Div，及用鼠標事件的Svg，明顯快快快快於應用js插件拖放的效率。於是乎插件雖然強大但對於大量節點的處理實在過於緩慢。
於是在圖形化上還是應用Svg更舒暢壹些。
但有壹個尚未解決的問題。
應用鼠標事件拖動Svg，當鼠標移動過快時，mousemove事件無法觸發，導致移動效果不能實現。粗略查了下似乎可以添加透明背景層接收所有觸發事件，不過還沒有深入研究。
這篇就到此吧。等解決了mousemove的bug再更新後續。
(?ω?`)