可以访问HTML5画布的各个像素。我们可以使用" ImageData"对象来实现。 " ImageData"对象包含一个像素数组。通过访问此数组，我们可以操纵像素。完成像素操作后，需要将像素复制到画布上以显示它们。

创建一个ImageData对象

使用2D上下文函数createImageData()创建一个ImageData对象。这是一个例子：

var canvas  = document.getElementById("ex1");
var context = canvas.getContext("2d");

var width  = 100;
var height = 100;
var imageData = context.createImageData(width, height);

createImageData()函数的width和height属性设置由创建的ImageData对象表示的像素区域的宽度和高度(以像素为单位)。上面的示例创建了一个具有100 x 100像素区域的" ImageData"对象。

ImageData属性

ImageData对象具有三个属性：

• 宽度
• 高度
• 数据

width和height属性包含图形数据区域的宽度和高度。

data属性是一个包含像素值的字节数组。

操纵像素

" data"数组中的每个像素都包含4个字节的值。红色，绿色和蓝色为一个值，alpha通道为一个值。像素的颜色是通过将红色，绿色和蓝色混合在一起以构成最终颜色来确定的。 Alpha通道说明像素的透明度。红色，绿色，蓝色和Alph值中的每一个都可以采用0到255之间的值。

这是一个设置第一个像素的颜色和Alpha值的代码示例：

var pixelIndex = 0;
imageData.data[pixelIndex    ] = 255;  // red   color
imageData.data[pixelIndex + 1] =   0;  // green color
imageData.data[pixelIndex + 2] =   0;  // blue  color
imageData.data[pixelIndex + 3] = 255;

要读取像素的值，请编写以下代码：

var pixelIndex = 0;
var red   = imageData.data[pixelIndex    ];  // red   color
var green = imageData.data[pixelIndex + 1];  // green color
var blue  = imageData.data[pixelIndex + 2];  // blue  color
var alpha = imageData.data[pixelIndex + 3];

要访问后续像素的值，请将" pixelIndex"值增加4(每个像素由4个数组元素组成，如上所示)。

我们可以像这样计算给定像素的索引：

var index = 4 * (x + y * width);

计算中的" x"和" y"是要计算其索引的像素的x和y坐标。 "数据"阵列中的像素被组织为一个长像素序列，从左上方的像素开始，垂直向右移动。当到达行尾时，像素序列从下面一行的最左边的像素继续。因此，要计算位于x处的像素的索引，我们需要将y坐标乘以每行的像素数，然后将x值添加到其中。

这是说明20像素宽和8像素高的ImageData像素阵列的图。在右边距中列出了每行像素的索引。如我们所见，索引的枚举从左上角的0开始，向右增加。到达线条的边缘时，枚举从下面线条的最左像素继续，并向右继续。

将像素复制到画布上

完成像素处理后，我们可以使用2D Context函数putImageData()将它们复制到画布上。 putImageFunction()有两种版本。函数putImageData()的第一个版本将所有像素复制到画布上。这是一个例子：

var canvasX = 25;
var canvasY = 25;

context.putImageData(imageData, canvasX, canvasY);

canvasX和canvasY参数是在画布上插入像素的位置的x和y坐标。

函数putImageData()的第二个版本可以将像素的矩形复制到画布上，而不是复制所有像素。这是一个代码示例：

var canvasX = 25;
var canvasY = 25;
var sx      = 0;
var sy      = 0;
var sWidth  = 25;
var sHeight = 25;

context.putImageData(imageData, canvasX, canvasY,
    sx, sy, sWidth, sHeight);

sx和sy参数(sourceX和sourceY)是要从像素数组复制的矩形左上角的x和y坐标。

sWidth和sHeight参数(sourceWidth和sourceHeight)是要从像素数组复制的矩形的宽度和高度。

从画布上抓取像素

也有可能从画布上抓取一个像素的矩形到一个" ImageData"对象中。这是通过使用getImageData()函数完成的。这是一个例子：

var x      =  25;
var y      =  25;
var width  = 100;
var height = 100;
var imageData2 = context.getImageData(x, y, width, height);

参数x和y是要从画布中抓取的矩形的左上角的坐标。

参数width和height是要从画布上抓取的矩形的宽度和高度。