三、创建canvas图片数据

代码如下：

/**
* @description 预先创建一组图像数据，并绑定在canvas对象上
* @param {Number} width 创建的宽度
* @param {Number} height 创建的高度
*/
context.createImageData(width, height)

接口比较简单，创建的数据可以像用getImageData获取到的数据那样进行同样的处理，这里仅需要注意的是：这组图像数据不一定会反映canvas的当前状态。
四、关于imageData的一点补充
再《HTML5高级程序设计》以及很多文章里面，都把imageData.data当作一个数组来讲，但其实：

代码如下：

imageData.data返回的并不是真正的数组，而是一个类数组的对象，可以将imageData.data的类型打印出来
console.log(Object.prototype.toString.call(imgageData.data)); //输出：[object Uint8ClampedArray]

然后再将imageData.data的具体内容打印出来，内容较长，仅截取最前面以及最后面的一段，可以看出：
imageData.data其实是一个对象，其索引从0开始，一直到width*height*4-1。

（本文来源于摩卡娱乐官网网站，更多请访问/webkaifa/）

为什么不直接用数组存放？因为数组的长度有个上限，假设为limitLength，超过limitLength的元素，均以键值的方式存储，如 data[limitLength + 100] 其实是 data['limitLength + 100 + '']（limitLength具体值记不得了，有兴趣的童鞋可以查下）
至于最后面的byteLength、byteOffset、buffer属性，未深究，此处不展开以防误导读者。
五、写在后面
水平有限，如有疏误，敬请指出

（本文来源于摩卡娱乐官网网站，更多请访问/webkaifa/）

来源:/n/20160219/1601199.html