颜色的表示

颜色的表示方法有

  • RRGGBB，十六进制表示（00~FF）；

  • RGB，重叠每一个表示（0~F）；

  • rgb(R,G,B)，十进制表示（0~255）
  • rgba(R,G,B,A)，在十六进制表示上加上了[0-1]的alpha通道

FFFFFF = rgb(255,255,255) = 11111111 11111111 11111111
一个24位的颜色值可以经由0~16777215（255255255）之间的任意一个整数表示；
在canvas中元素使用RGB颜色，这表明每种颜色都是由红绿蓝三原色构成的，而三原色中的每个合成色都可以经由0~255的一个整数表示，又因为红绿蓝每个合成色都存在256个可能，他们的组合就构成了16777215种颜色。

js十六进制

js的十六进制表示
在前边加上0x（零x），表示十六进制
console.log(0xFFFFFF)
image.png

十六进制转十进制
image.png
需要注意的是数字需要用()包裹起来才能用toString方法

位操作提取三原色

在二十四位的颜色表示中前八位表示红色，中间八位表示绿色，后八位表示蓝色，下边是一个从一个组合颜色值中提取出红色、绿色、蓝色的公式：

  • red = color >> 16 & 0xFF
  • green= color >> 8 & 0xFF
  • blue = color & 0xFF

你可能没有遇到过两个位操作符，位操作符在二进制层面（即0和1）上对数字加以操作；
让我们来拿这个提取红色的例子来解释一下：
red = color >> 16 & 0xFF

用十六进制的color = 0xF0FFFF来套一下上边的公式
console.log(0xF0FFFF >>16 & 0xFF)
image.png
验证一下十六进制F0十进制是多少，如果是240则表示公式正确

  • 先把0xF0按四位一组转换为二进制，0xF0 => 11110000
  • 二进制的11110000转换为十进制，11110000 = 128+64+32+16 = 240，公式正确。

这很好理解，24位表示的颜色向右移动16位，过多的数字直接丢弃，只剩下头上表示红色的八位。

你可能会问这个按位与（&0xFF）操作是为什么
让我们来看一下提取绿色的例子
green= color >> 8 & 0xFF
用十六进制的color = 0xF0FFFF来套一下上边的公式
console.log(0xF0FFFF >> 8 & 0xFF)
0xF0FFFF >> 8 结果是0xF0FF
然而中间的0xF0FFFF 才是我们要的表示绿色的G
这时候&0xFF就派上用场咯~
0xF0FF => 1111000011111111
&
0xFF => 0000000011111111
结果：0000000011111111
前边多余的八位正好被0按位与掉了
只剩下11111111也就是我们要的中间的绿色表示的值