Javascript 解释按位运算符在画布imagedata像素颜色分配中的使用

首先是守则：

    data[y * canvasWidth + x] =
        (255   << 24) | // alpha
        (value << 16) | // blue
        (value <<  8) | // green
         value;     // red
    }

数据[y*画布宽度+x]=
（255代码尝试将值打包为32位。请尝试这样理解它

(255 << 24) | (value << 16) | (value << 8) | value;

1111 1111 0000 0000 0000 0000 0000 0000

(colorValue & (255 << 16)) >> 16

var redMask   = 0xFF000000,
    greenMask = 0x00FF0000,
    blueMask  = 0x0000FF00,
    valueMask = 0x000000FF;

然后，无论
值
的值是什么，都会左移16位，然后用已经得到的值进行
或
运算。让我们假设
值
也是255。因此，255代码尝试将值打包为32位。试着这样理解它

(255 << 24) | (value << 16) | (value << 8) | value;

1111 1111 0000 0000 0000 0000 0000 0000

(colorValue & (255 << 16)) >> 16

var redMask   = 0xFF000000,
    greenMask = 0x00FF0000,
    blueMask  = 0x0000FF00,
    valueMask = 0x000000FF;

然后，无论
值
的值是多少，都会左移16，然后
或
与已获取的值一起移动。让我们假设
值
也是255。因此，255允许您将4个数字放入一个整数中，因此生成的数组长度是长度的1/4。这可以加快一些操作，并减少数组的占用空间图像数据。它允许您将4个数字放入一个整数中，因此生成的数组是长度的1/4。这可以使一些操作更快，并减少图像数据的占用。声音响亮、清晰，但对于“读取”部分，我发现更清晰，如果js引擎愚蠢，使用red=colorValue&0xFF0000；green=colorValue&0x00FF00；蓝色=颜色值&0x0000FF@GameAlchemist谢谢：-）答案中包含了这一点。为了清楚和完整，您还可以解释一下这种包装如何适合帆布
ctx.getImageData（0,0，w，h）.data
返回键入的数据视图
uint8clampedaray
。然后使用
uint32数组
类型化数据视图来存储数据..那么它们之间有什么区别呢？@MuhammadUmer:在字节缓冲区上可以有任何类型的视图：可以将它们视为8,16,32位有符号或无符号整数数组+32/64浮点视图+钳制视图。请参阅html5rocks中有关类型化数组的教程：！！！重要通知！！！如果在图像字节缓冲区上使用32位视图，endianness将被考虑在内，为了使其简短，您必须大声清晰地反转rgba掩码顺序（99.99999%的设备上使用abgr），但对于“读取”部分，我发现更清晰，如果js引擎愚蠢，使用red=colorValue&0xFF0000，速度更快；绿色=颜色值&0x00FF00；蓝色=颜色值&0x0000FF@GameAlchemist谢谢：-）答案中包含了这一点。为了清楚和完整，您还可以解释一下这种包装如何适合帆布
ctx.getImageData（0,0，w，h）.data
返回键入的数据视图
uint8clampedaray
。然后使用
uint32数组
类型化数据视图来存储数据..那么它们之间有什么区别呢？@MuhammadUmer:在字节缓冲区上可以有任何类型的视图：可以将它们视为8,16,32位有符号或无符号整数数组+32/64浮点视图+钳制视图。请参阅html5rocks中有关类型化数组的教程：！！！重要通知！！！如果在图像字节缓冲区上使用32位视图，则会考虑endianness，为了使其简短，必须反转rgba掩码顺序（在99.99999%的设备上为abgr）
var colorValue = 2131637306;

0111 1111 0000 1110 0011 0100 0011 1010

console.log(colorValue & (255 << 24));
# 2130706432

0111 1111 0000 0000 0000 0000 0000 0000

console.log((colorValue & (255 << 24)) >> 24);
# 127

 0000 0000 0000 0000 0000 0000 0111 1111

var redMask   = 0xFF000000,
    greenMask = 0x00FF0000,
    blueMask  = 0x0000FF00,
    valueMask = 0x000000FF;