原文: How to Generate Colors in JavaScript

在这篇文章中,我们将用 JavaScript 创建一个随机颜色生成器。在这个过程中,我们将探索编程中的一般主题,如函数和随机化。

我们将创建一个名为“改变背景颜色”的项目来说明这些概念。你可以在这里看到这个 demo。

在本教程中,我们将:

  • 学习计算机如何理解颜色的概念
  • 了解十六进制系统及其对计算机的作用
  • 学习如何在你的代码中分离关注点
  • 探索 JavaScript 中使用的循环、数组和函数的世界
  • 使用这些新知识来生成十六进制的颜色
  • 介绍 JavaScript 中的事件
  • 在 HTML 代码中点击一个按钮来调用函数
  • 当按钮被点击时,改变 body 样式的背景颜色

只要你熟悉变量并且知道如何在一种编程语言中创建变量,你应该就能理解这篇文章。

我们将讨论的内容

  1. 计算机如何理解颜色
  2. 什么是十六进制系统
  3. 如何在色彩空间中使用十六进制
  4. 如何用十六进制生成颜色

计算机如何理解颜色

计算机显示器使用被称为“像素”的小点,通过混合红、绿、蓝光,来显示颜色。

为了解释和处理颜色,计算机使用被称为“色彩空间”的数学模型。通过将颜色转换为特定的色彩空间,计算机可以在屏幕上显示之前修改和调整它们。

有许多不同类型的色彩空间,每一种都有其代表色彩的方式。下面是一些例子:

  1. RGB(Red 红、Green 绿、Blue 蓝),这是计算机图形中最常用的色彩空间,它通过混合不同数量的红色、绿色和蓝色成分来表示颜色。
  2. CMYK(Cyan 青色、Magenta 品红、Yellow 黄色、Black 黑色),这是一个用于印刷的色彩空间,通过将不同颜色的点叠加在一起来创造色彩。
  3. HSL(Hue 色相、Saturation 饱和度、Lightness 亮度),这种色彩空间根据颜色的色调(它们是哪种颜色)、饱和度(颜色的强度)和亮度(颜色的明暗程度)来表示颜色。
  4. LAB(Lightness 亮度、A、B),这种色彩空间用于数字成像,根据颜色的亮度以及它们在两个色轴上的位置来表示颜色:A(从绿色到红色)和 B(从蓝色到黄色)。
  5. XYZ,这种色彩空间根据颜色的反射或发射的光量来表示颜色,通常用于色彩匹配应用。

什么是十六进制系统

十六进制是一种基数为 16 的编号系统,通常用于计算机和数字电子学。

在这个系统中,数字用 16 位数字表示:常规的十进制数字 0 到 9,加上字母 A 到 F 代表 10 到 15 的数值。

[0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F]

十六进制在计算中经常被使用,因为它提供了一种紧凑的和易于阅读的方式来表示二进制数字。每个十六进制数字对应于四个二进制数字,或比特,这意味着两个十六进制数字可以代表一个字节的数据(8 比特)。

如何在色彩空间中使用十六进制

十六进制通常用来表示各种色彩空间中的颜色,特别是在数字媒体中。

RGB 中的每个分量都可以有一个 0 到 255 的数值,这些数值可以使用十六进制的编号系统被转换为十六进制的符号。

在 RGB 十六进制符号中,每个分量由一个两位数的十六进制数字表示,其范围从 00 到 FF。

例如:

COLORRGBHEXADECIMAL
Black0,0,0#000000
Teal0,186,186#00BABA
Green17,235,17#11EB11
Musterd-Yellow250,194,134#FAC286
White255,255,255#FFFFFF
X4ES_ppBld_5qGeavLFSlvSwyXHREWoFaO9WBIp3mV4psy-FNbZV6hXD5_eES4gdzpAXIS8uv1qdFeAyKCwPMgXaZnmlTpBBpw4X2Z8_pyP426g_RSLtipKJsid-e4lNy8D9cmgqE3EtDo3wnVnhC68
十六进制颜色系统图解

如何用十六进制生成颜色

我们在本节的目标是建立演示项目。该演示项目是一个按钮。在点击这个按钮时,会产生一种颜色,改变 HTML 网页的背景。

我们通过 6 个步骤来构建这个项目。我们将逐一进行讲解。

1. 用一个数组表示十六进制

const hexCharacters = [0,1,2,3,4,5,6,7,8,9,"A","B","C","D","E","F"]

第一步是在一个结构中保存我们的字符。为了简单起见,我选择了一个数组。数组在 JavaScript 中的工作方式允许我们通过提供其索引来选择任何项目。

2. 创建一个函数,从这个数组中提取项目

const hexCharacters = [0,1,2,3,4,5,6,7,8,9,"A","B","C","D","E","F"]

function getCharacter(index) {
	return hexCharacters[index]
}
getCharacter 接收所需的索引,该索引必须是一个整数

函数 getCharacter 将获取索引并返回存储在该处的十六进制字符。这有助于我们挑选颜色。

3. 使用提取的值表示颜色

RGB 的十六进制表示法以 # 开始,后面有 6 个从我们的数组中选出的字符。因此,函数 getCharacters 将被调用 6 次。我们可以采用一个 for 循环来更快地调用函数。


const hexCharacters = [0,1,2,3,4,5,6,7,8,9,"A","B","C","D","E","F"]


function getCharacter(index) {
	return hexCharacters[index]
}

function generateJustOneColor(){
    
	let hexColorRep = "#"

    for (let position = 0; position < 6; position++){
        hexColorRep += getCharacter( position )
    }
	
	return hexColorRep

}

console.log( generateJustOneColor() )
循环 6 次以生成字符串

generateJustOneColor() 生成一个以字符串表示的随机十六进制颜色代码。

该函数首先声明了一个名为 hexColorRep 的变量,并用 # 字符对其进行初始化。

接下来,该函数使用一个 for 循环来生成颜色代码的后六个字符。这个循环运行了六次,因为每个颜色代码由六个十六进制数字表示。

在这个循环中,该函数调用另一个名为 getCharacter() 的函数来为颜色代码的每个位置生成一个十六进制数字。position 参数被传递给 getCharacter() 函数,以指示正在生成的数字。

一旦颜色代码的所有六位数字都被生成,该函数就会将完整的颜色代码作为一个字符串返回。

Screenshot-2023-02-21-at-08.56.42
每次都返回相同的结果

上述代码将返回相同的结果/颜色,因为我们的 for 循环的 position 是相同的。所以我们需要引入随机性。这意味着我们对字符的选择必须有惊喜元素。

4. 改进我们的代码以生成随机颜色

在 JavaScript 中,Math.random() 是引入随机性的方法之一。Math.random() 每次被调用都会给出一个新的结果,范围是 01

虽然 Math.random() 函数生成了一个介于 0(包括 0)和 1(不包括 1)之间的随机十进制数,但我们可以通过操作这个值来获得一个介于 0 和 15 之间的随机整数。

这是通过将随机十进制数乘以所需的整数范围(在本例中为 16),然后应用 Math.floor() 方法将结果四舍五入到最近的整数。这将确保输出在所需的整数范围内。

例如,如果 Math.random() 产生的数值是 0.435,那么用它乘以 16,结果就是 6.96。对这个结果应用 Math.floor() 可以将其四舍五入为 6,这是一个 0 到 15 范围内的随机整数。

Math.floor() 在这里发挥了两个作用:它通过四舍五入帮助我们避免了 RangeError(最大的数字是 15),并确保我们总是返回一个整数。

const randomNumber = Math.floor ( Math.random() * hexCharacters.length ) 
randomNumber 将作为函数 getCharacters 的索引
Screenshot-2023-02-21-at-08.34.10
Math.random() 每次被调用时产生一个新的结果

我们已经有了生成颜色所需的所有成分,所以现在我们可以把它们结合起来。每个十六进制颜色必须以 “#” 开头,后面有 6 个字符。



const hexCharacters = [0,1,2,3,4,5,6,7,8,9,"A","B","C","D","E","F"]



function getCharacter(index) {
	return hexCharacters[index]
}

function generateNewColor() {
	let hexColorRep = "#"

	for (let index = 0; index < 6; index++){
		const randomPosition = Math.floor ( Math.random() * hexCharacters.length ) 
    	hexColorRep += getCharacter( randomPosition )
	}
	
	return hexColorRep
}

console.log( generateNewColor() ) 
循环 6 次,产生随机的 position,使用 position 从数组中选择一个项目

generateNewColor() 函数是程序的主函数,用于生成随机十六进制颜色代码。它首先用 # 字符初始化一个名为 hexColorRep 的字符串变量,因为所有十六进制颜色代码都以这个字符开始。

接下来,该函数使用一个 for 循环来生成六个随机字符的颜色代码。在这个循环中,该函数使用 Math.random() 函数和 hexCharacters 数组的长度在 “hexCharacters” 数组的范围内生成一个随机位置,然后这个位置被用于通过 getCharacter() 函数从 hexCharacters 数组中获得一个随机字符。得到的字符被附加到 hexColorRep 字符串变量中。

最后,generateNewColor() 函数返回完整的十六进制颜色代码,表示为一个字符串。

Screenshot-2023-02-21-at-08.55.07
结果总是一个新的十六进制颜色

5. 创建一个界面来展示我们的代码

我们需要一个界面,这样用户就可以与我们的代码互动,看到我们创造的魔法。

我们将有一个 HTML 页面,上面有一个指令列表和一个按钮。元素 button 和 span 被赋予了 id 属性,这样就可以在我们的 JavaScript 代码中更容易找到它们。你可以在这里查看 HTML 代码。

demo4

6. 使用一个事件连接按钮和函数

我们的目标是改变这个 HTML 页面的背景颜色样式。

let btn = document.getElementById('b')
let bgColor = document.getElementById('s')

btn.addEventListener("click", (event) => {
		
	const newColor = generateNewColor()

	document.body.style.backgroundColor  = newColor
	bgColor.textContent = newColor 
		
})
当按钮被点击时,我们生成一个新的颜色并将其设置为 body 的属性

这个程序,当一个按钮被点击时,将网页的背景颜色设置为随机生成的十六进制颜色代码。

该程序首先使用 document.getElementById() 方法定义了两个变量。btn 变量代表网页上 ID 为 b 的按钮元素,而 bgColor 变量代表网页上 ID 为 s 的文本元素。

接下来,程序使用 addEventListener() 方法为 btn 元素添加了一个事件监听器。这个监听器监听按钮上的 click 事件。当被触发时,它执行一个函数,使用 generateNewColor() 函数生成一个新的随机颜色代码。

然后使用 document.body 元素的 style.backgroundColor 属性将得到的颜色代码赋值给网页的背景颜色。这将使整个网页被更新为新的颜色。

最后,颜色代码也通过 textContent 属性显示在网页的 bgColor 元素中。

你可以在这里查看全部代码。

ezgif.com-gif-maker-1
完成的产品

总结

在这篇文章中,我们展示了如何在 JavaScript 中生成随机颜色。我们使用了 Math 类中的 randomfloor 方法,并展示了 for 循环的基本用法。

演示项目中,生成的颜色被作为背景传给了一个 HTML 页面。这就是为什么在点击按钮时,会生成一种新的颜色,并更新页面的背景颜色样式。请看这里的完整代码。

如果你想看到更多的教学内容,请查看 Xutini——这里有学习数字技能的有趣方式。