如何操纵像素

如何操纵像素

每个像素的数据数组包含4个字节值。一个值为红色,绿色和蓝色的颜色,和一个值为alpha通道。（就像css3的 rgba）一个像素的颜色是由混合红、绿和蓝色一起,组成最后的颜色。alpha通道是告诉我们透明度的。每个红色、绿色、蓝色和甲值可以采取0到255之间的值。
为第一个像素设置颜色和透明度:
var pixelIndex = 0;imageData.data[pixelIndex ] = 255; // red colorimageData.data[pixelIndex + 1] = 0; // green colorimageData.data[pixelIndex + 2] = 0; // blue colorimageData.data[pixelIndex + 3] = 255;

可以设置了，那么该怎样读取呢？
var pixelIndex = 0;var red = imageData.data[pixelIndex ]; // red colorvar green = imageData.data[pixelIndex + 1]; // green colorvar blue = imageData.data[pixelIndex + 2]; // blue colorvar alpha = imageData.data[pixelIndex + 3];

每个像素是由4个数组元素,如上所示。
有了这样的理论逻辑我们可以通过canvas上的任意一点（x，y）计算出imageData中表示次像素的第一个元素的索引值。
var index = 4 * (x + y * width);

x和y的计算是x和y坐标的像素来计算的指数。像素阵列的数据被作为一长序列的像素,从左上角和垂直向右边移动。当这一行的结束是达到了像素序列继续从最左边的像素在下面的代码行。因此,计算一个像素指数位于x,y,你需要乘y坐标与像素的数量,并添加x的值。
下面的图片为20像素宽和8个像素高ImageData像素阵列。在右边距指数的像素的每一行是上市。正如您可以看到的,枚举的索引从0开始在左上角,增加向右边。当边缘线达到时,枚举继续从最左边的像素的线下面,并继续向右。

应该说设置像素，在菜单里找 再看看别人怎么说的。

如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！

点此我要举报以上问答信息