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