小游戲canvas直接操作ImgaeData時(shí)的幾個(gè)優(yōu)化點(diǎn)

前不久在處理一個(gè)canvas繪圖需求時(shí)，經(jīng)過(guò)不斷測(cè)試優(yōu)化，將重繪一幀的時(shí)間由400ms降低至20ms左右，基本滿足了要求。特此記錄一下優(yōu)化方向。

設(shè)備環(huán)境：Android，360*720，pixelRatio=3

1.盡量減少canvas操作

通常一幀的畫面由多層內(nèi)容疊加繪制而成，這時(shí)應(yīng)把中間態(tài)畫面繪制到與imageData大小相等的數(shù)組中，一幀內(nèi)容繪制完全后一次性繪制到canvas

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

2.盡量減少getImageData

除去必須獲取原有數(shù)據(jù)的場(chǎng)合，可使用createImageData代替，再putImageData到指定位置。

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

3.不要遍歷ImageData.data

由于ImageData.data為只讀，看起來(lái)只能遍歷賦值，但其實(shí)它有set方法，可以一次性將數(shù)據(jù)填入。

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

var data = new Uint8Array(16);

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

ctx.putImageData(data, 0, 0);