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

2024年5月21日 219次阅读 来源: calimanco

媒介

本篇重要解说关于计算机颜色体系的观点，后续连系一些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为例，如今已知的是各个颜色值，下面供应两种做法：

1、获得rgb(R,G,B)花样

直接应用js数字转换为字符串时默许是十进制的特征。

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

2、获得#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花样。
    原文作者：calimanco
    原文地址: https://segmentfault.com/a/1190000013970255
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞