【30分钟学完】canvas动画|游戏基础(extra1)：颜色那些事

前言

本篇主要讲解关于计算机颜色系统的概念，后续结合一些canvas的应用。由于是“你不知道也不要紧”的边缘知识，因此做为本系列教程的扩展，没有兴趣的同窗能够跳过。
开始咱们万紫千红的故事吧！
本人能力有限，欢迎牛人共同讨论，批评指正。

先从老朋友CSS讲起

咱们熟悉的CSS风格颜色表示方式，大致有下面几种，canvas大致是直接沿用这些写法的，但最后包含透明度的写法有些许不一样。

• #RRGGBB：十六进制格式，红绿蓝分别用两位十六进制数表示。
• #RGB：简写的十六进制格式，转换成6位格式时会重复三原色，例如#fb0->#ffbb00。
• rgb(R,G,B)：函数表达式，三原色分别由0~255的整数值表示。
• rgba(R,G,B,A)：包含透明度的函数表达式，其中alpha参数为0~1，须要指定透明度的颜色必须使用该格式。

做为前端人员平时用得不少，但你可能会一脸懵逼以前本身写的颜色字符串竟然是十六进制？
待我细细道来。这里的R便是红色（red），G便是绿色（green），B便是蓝色（blue），这三个是显示器广泛使用的三基色，属于叠加型原色，百科摘录以下。

【科普】原色是指不能透过其余颜色的混合调配而得出的“基本色”。
以不一样比例将原色混合，能够产生出其余的新颜色。以数学的向量空间来解释色彩系统，则原色在空间内可做为一组基底向量，而且能组合出一个“色彩空间”。因为人类肉眼有三种不一样颜色的感光体，所以所见的色彩空间一般能够由三种基本色所表达，这三种颜色被称为“三原色”。通常来讲叠加型的三原色是红色、绿色、蓝色（又称三基色，用于电视机、投影仪等显示设备）；而消减型的三原色是品红色、黄色、青色（用于书本、杂志等的印刷）。

解密颜色值

每个颜色都是由三基色叠加合成，因此咱们须要告诉计算机这各个基色的比例（浓度），将这个比例量化就是一个0~255的整数，也可说是256个级别，越大即表示各类原色更多（更浓）。

【PS】至于为何是256个级别?
是由于计算机中每一个原色用8位二进制（0或1）表示，也就是2的8次方共256。

每一个颜色都是256个级别，那它的组合的可能就有256*256*256=16777216，换句话说，一个颜色用24位二进制表示，换算成十进制就是0~16777215。
这里你应该能够看懂上面CSS颜色表示方式前三个的含义了吧，至于rgba(R,G,B,A)多加入了A，表示透明度，这个是扩展版的32位颜色系统，多了一个额外的8位二进制表示透明度的级别，CSS将它简化成0~1表示。

• • *

举个例子吧！
以#FF55F3这个颜色为例进行讲解。（0x开头表示十六进制数，js中不区分大小写，至于不知道什么是十六进制的，请自行百度）
红色是0xFF，绿色是0x55，蓝色0xF3。
转换成十进制：红色是255，绿色是85，蓝色是243。也就是说这个数值和rgb(255,85,243)写法是等价的。

【PS】简便的转换方法，直接在控制台打印便可，好比 console.log(0xF3);，js默认输出十进制表示的字符串。

颜色合成

颜色理论学得差很少了，如今来看看合成，已知三原色的值，要如何用代码合成一个颜色呢？
以上面说的#FF55F3为例，如今已知的是各个颜色值，下面提供两种作法：

一、获得rgb(R,G,B)格式

直接利用js数字转换为字符串时默认是十进制的特性。

let r = 0xFF;
let g = 0x55;
let b = 0xF3;
let color = `rgb(${r},${g},${b})`;

二、获得#RRGGBB格式

一个24位的颜色值，二进制即：RRRRRRRRGGGGGGGGBBBBBBBB
红色值左移16位，绿色左移8位，将三者作“或”就能获得合成的24位颜色值，再转成16进制字符串便可。

0xFF << 16 = 111111110000000000000000
0x55 << 08 = 000000000101010100000000
0xF3       = 000000000000000011110011
OR         = 111111110101010111110011

//省略跟前面同样的...
let color = `#${(r << 16 | g << 8 | b).toString(16)}`;

颜色分解

合成学完了，如今考虑一下如何用代码分解颜色，也就是把一个颜色分离出红、绿、蓝。
rgb(R,G,B)格式就说了，切字符串就能获得。
重点讨论#RRGGBB格式，其实就是第二种合成方法的逆过程，右移后“与“操做，简单来讲就是把想要的颜色值所在的位置移动到末尾，再用“与”0xFF剔除其余颜色。
仍是以#FF55F3为例，现已知这个字符串，要求分解出三基色的值。

1. 切除“#”号获得16进制字符串；
2. 红色：右移16位，与0xFF作“与”操做；
3. 绿色：右移8位，与0xFF作“与”操做；
4. 蓝色：直接与0xFF作“与”操做。

let color = parseInt('#FF55F3'.slice(1), 16);
let r = color >> 16 & 0xFF
let g = color >> 8 & 0xFF
let b = color & 0xFF

以绿色提取过程为例：

0xFF55F3      = 111111110101010111110011
0xFF55F3 >> 8 = 000000001111111101010101
0xFF          = 000000000000000011111111
AND           = 000000000000000001010101

封装颜色工具

固然，上面的合成、分解代码都是基本理论的应用，实际项目中使用会为了健壮性封装成更加合理的工具，能够参考咱们工具类utils.js中的colorToRGB()和parseColor()两个函数。

• colorToRGB()用于将#RRGGBB格式或任意数字，转换成rgb(R,G,B)或rgba(R,G,B,A)；
• parseColor()用于将#RRGGBB格式转成数字，将数字转成#RRGGBB格式。