javascript - 解释按位运算符在 Canvas 图像数据像素颜色分配中的使用

Question

首先是代码:

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

我试图重新理解这一点，我曾经有过。但后来我忘了。在这篇文章中又找到了:https://hacks.mozilla.org/2011/12/faster-canvas-pixel-manipulation-with-ty

正在使用的代码:http://jsfiddle.net/andrewjbaker/Fnx2w/

我的问题:

• 什么是<<和|在这里做什么，他们完成了什么以及为了什么？
• 如何将所有 rbga 值组合在一起？

链接:

1. > https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays
2. > https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray
3. > https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint32Array
4. > https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators
5. > https://developer.mozilla.org/en-US/docs/Web/API/ImageData

Answer 1

该代码尝试将值打包为 32 位。试着这样理解它

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

所以首先，255 左移了 24 次。于是，二进制值就变成了这样

1111 1111 0000 0000 0000 0000 0000 0000

然后，无论 value 的值是什么，都左移 16 位，然后用已经得到的值进行或运算。让我们假设 value 也是 255。因此，255 << 16 将是

0000 0000 1111 1111 0000 0000 0000 0000

因此，当我们按位或时，值变为

1111 1111 1111 1111 0000 0000 0000 0000

现在，我们在其中打包了两个值。同理，所有的值都会打包成一个32位的数字。

---

简单包装是成功的一半。如果我想获得 REG 值怎么办？我们使用掩码和按位与运算符，就像这样。

(colorValue & (255 << 24)) >> 24

这将给出 8 位红色值。我们只启用 32 位数字中最右边的 8 位，所有其他位都设置为 0。因此，当我们对实际值执行 & 时，我们将在对应的这 8 位中启用位到面具。然后我们右移 24 位，将 24 位推离边界，只保留实际的红色值。

同样可以得到绿色的值，像这样

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

和蓝色

(colorValue & (255 << 8)) >> 8

和最后一个简单的值

(colorValue & 255)

例子

比方说，

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

同样，可以检索所有值。

正如@GameAlchemist 在评论部分提到的，掩码通常以十六进制表示，以便清楚地理解这一点，如下所示

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