小遊戲canvas直接操做ImgaeData時的幾個優化點

前不久在處理一個canvas繪圖需求時，通過不斷測試優化，將重繪一幀的時間由400ms下降至20ms左右，基本知足了要求。特此記錄一下優化方向。

設備環境：Android，360*720，pixelRatio=3

1.儘可能減小canvas操做

一般一幀的畫面由多層內容疊加繪製而成，這時應把中間態畫面繪製到與imageData大小相等的數組中，一幀內容繪製徹底後一次性繪製到canvas

var buff = new Uint8Array(360*720*4)
var layers = [];
for(var k in layers){
    layers[k].render();//畫入buff
}

2.儘可能減小getImageData

除去必須獲取原有數據的場合，可以使用createImageData代替，再putImageData到指定位置。

var imgData = ctx.createImageData(360,720);
//大小不變的imageData可考慮全局保存

3.不要遍歷ImageData.data

因爲ImageData.data爲只讀，看起來只能遍歷賦值，但其實它有set方法，能夠一次性將數據填入。

var imgdata = ctx.createImageData(2,2);

var data = new Uint8Array(16);

//遍歷data填入數據（遍歷數組比imageData快得多）
imgdata.data.set(data);

ctx.putImageData(data, 0, 0);