Canvas繪圖最佳化之使用位元影像--基於createjs庫

標籤：參數   基於   即時   blog   圖形   arc   方便   選擇   nbsp   

在地圖上即時繪製大量（萬層級）圖形，即時繪製的原因是因為各個圖形形狀不同，圖形要按照後端傳送的參數來繪製。

用canvas繪製圖形比較方便，javascript的api介面也比較簡單。現在也有很多的js canvas庫，比如這個：createjs中的easeljs，對canvas進行了輕量的封裝，支援鏈式操作，支援給圖形添加事件，雖然它是專門用來做遊戲開發的，但拿它來即時繪製圖形，在圖形上添加事件，真的是再方便不過了。

比如繪製一個實心圓或扇形，可以用arc()函數：

 

但是這裡有個問題，arc函數是很慢的，很耗費cpu資源的。那麼該如何最佳化呢？如果僅從canvas繪製的角度來看：用其它方法來代替arc是一個不錯的選擇，比如用createjs提供的BitMap引入已有的圖片，然後將圖片進行旋轉、變形等，如果可以滿足需求，那麼也很不錯。

 

Canvas繪圖最佳化之使用位元影像--基於createjs庫