HTML canvas(画布)createImageData()方法

createImageData()方法定义和用法

createImageData()方法创建一个新的空白ImageData对象。默认情况下，新对象的像素值为透明黑色。
对于ImageData对象中的每个像素，有四条信息，即RGBA值：

R - 红色（从0到255）
G - 绿色（从0到255）
B - 蓝色（从0到255）
A - Alpha通道（从0到255; 0是透明的，255是完全可见）

因此，透明的黑色表示：（0,0,0,0）。
颜色/alpha信息保存在一个数组中，由于数组包含每个像素的4条信息，因此数组的大小是ImageData对象大小的4倍：width * height * 4。（查找数组大小的更简单方法是使用ImageDataObject.data.length）
包含颜色/alpha信息的数组存储在ImageData对象的data属性中。
提示：在操作数组中的颜色/alpha信息后，可以使用putImageData()方法将图像数据复制回画布。
例子：
使ImageData对象中的第一个像素变为红色的语法：

imgData=ctx.createImageData(100,100);

                imgData.data[0]=255;
                imgData.data[1]=0;
                imgData.data[2]=0;
                imgData.data[3]=255;

使ImageData对象中的第二个像素为绿色的语法：

imgData=ctx.createImageData(100,100);

                imgData.data[4]=0;
                imgData.data[5]=255;
                imgData.data[6]=0;
                imgData.data[7]=255;

createImageData()方法浏览器支持

Internet Explorer	Chrome	FireFox	Safari	Opera

9.0（含）以上	支持	支持	支持	支持

createImageData()方法语法

1.这将创建一个具有指定尺寸（以像素为单位）的新ImageData对象：

var imgData=context.createImageData(width,height);

2.这将创建一个新的ImageData对象，其尺寸与anotherImageData指定的对象相同（这不会复制图像数据）：

var imgData=context.createImageData(imageData);

createImageData()方法实例

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var imgData = ctx.createImageData(100, 100);

var i;
for (i = 0; i < imgData.data.length; i += 4) {
    imgData.data[i+0] = 255;
    imgData.data[i+1] = 0;
    imgData.data[i+2] = 0;
    imgData.data[i+3] = 255;
}

ctx.putImageData(imgData, 10, 10);

尝试一下

createImageData()方法参数值

参数	描述
width	新ImageData对象的宽度，以像素为单位
height	新ImageData对象的高度，以像素为单位
imageData	anotherImageData对象

createImageData()方法相关页面

HTML教程：HTML脚本

HTML教程：HTML画布