HTML5 Canvas 像素处理

html5 Canvas 像素处理的createImageData() 函数 使用 方法 ，在线实例演示canvas像素处理，将像素复制到画布上，如何使用语法定义及它的 属性 值详细资料等。

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

创建 一个 ImageData对象

创建ImageData对象是使用2D上下文 功能 完成的 createImageData()。这是 一个 示例:

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

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

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

ImageData 属性

该ImageData对象具有三个 属性 :

width

height

data

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坐标来计算的索引。data阵列中的像素被组织为 一个 长像素序列，从左上方的像素开始，垂直向右移动。当到达行尾时，像素序列从下面一行的最左边的像素继续。因此，要计算位于x处的像素的索引，您需要将y坐标乘以每行的像素数，然后将x值 添加 到其中。
这是说明20像素宽和8像素高的ImageData像素阵列的图。在右边距中列出了每行像素的索引。如您所见，索引的枚举从 左上角 的0开始，向右 增加 。到达线条的边缘时，枚举从下面线条的最左像素继续，并向右继续。

ImageData像素网格-20 x 8像素网格。像素从 左上角 向右索引，线下向下。

将像素复制到画布上

完成像素处理后，可以使用2D上下文 功能 将其复制到画布上pu@R_160_ 502 5@Data()。的有两个版本pu@R_160_ 502 5@Function()。该pu@R_160_ 502 5@Data() 函数 的第 一个 版本将所有像素复制到画布上。这是 一个 示例:

var?canvasX?=?25;
var?canvasY?=?25;

context.pu@R_160_ 502 5@Data(imageData,?canvasX,?canvasY);

canvasX和canvasY参数是x和的画布上何处插入的像素的y坐标。
该pu@R_160_ 502 5@Data() 函数 的第二个版本可以将像素的矩形而不是所有像素复制到画布上。这是 一个 代码 示例:

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

context.pu@R_160_ 502 5@Data(imageData,?canvasY,?sx,?sy,?sWidth,?sHeight);

sx和sy参数（sourceX和sourceY）是x和矩形的 左上角 的y坐标，以从像素阵列复制。
sWidth和sHeight参数（sourceWidth和sourceHeight）是该矩形的宽度和高度，以从像素阵列复制。

从canvas中 获取 像素

也可以从画布上将 一个 像素矩形捕获到 一个 ImageData对象中。这是使用ge@R_160_ 502 5@Data() 函数 完成的。这是 一个 示例:

var?x??????=??25;
var?y??????=??25;
var?width??=?100;
var?height?=?100;
var?imageData2?=?context.ge@R_160_ 502 5@Data(x,?y,?width,?height);

x和y参数是从画布矩形的 左上角 抢的坐标。
的width和height参数是从画布矩形以抢的宽度和高度。

HTML5 Canvas 制作动画 ? ?HTML5 Canvas toDataURL()

查看更多关于HTML5 Canvas 像素处理的详细内容...