小游戏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);