HTML5 Canvas 像素处理的createImageData()函数使用方法,在线实例演示canvas像素处理,将像素复制到画布上,如何使用语法定义及它的属性值详细资料等。
可以访问HTML5画布的各个像素。您可以使用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对象具有三个属性:
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上下文功能将其复制到画布上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参数是从画布矩形以抢的宽度和高度。