生成随机rgba颜色

马黑黑

rgb() 和 rgba() 都是CSS函数，用来表达颜色，后者与前者的区别仅在于多设置了 alpha 值（即透明度值，0表示完全透明，1表示不透明）。

很多场景，我们需要使用随机的 rgb 或 rgba 颜色，所以，编写一个随机生成 rgba 的函数很有必要。看下面的代码是否够简洁：

1. let generateRgba = (opacity) => {
   
2.         let ar = [256,256,256].map((item) => Math.floor(Math.random() * item));
   
3.         ar.push( opacity || (.5 + Math.random() * .5).toFixed(1));
   
4.         return 'rgba(' + ar.join(',') + ')';
   
5. }

复制代码

函数 generateRgba(opacity) 的参数，若调用者未给出该参数，则随机在 0.5 - 0.9 间取值。rgb 各值的取值采用整数，我将数组 [256,256,256] 用 map 方法一次性将数组元素取随机数而后取向下取整，然后再追加不透明值，最后返回完整的 rgba() 格式的颜色表达式。

调用方法，比如，我们给id="mybox"的HTML元素设置背景颜色：

    mybox.style.background = generateRgba();

假如我们希望指定透明度，可以这样调用函数：

    mybox.style.background = generateRgba(0.8);

马黑黑

演示：单击下面方框查看效果

红影

这个不但能生成随机色，还能随机生成opacity 值，太棒了

红影

随机点着，欣赏着各种漂亮颜色

红影

看到这个，又想起那个十六进制颜色在线调配那个帖子了，那个也特别喜欢。

马黑黑

醉美水芙蓉 发表于 2023-8-17 11:57
这个用在帖子七彩的，真漂亮！黑黑老师牛！

rgb只是一个实现方式之一

马黑黑

红影 发表于 2023-8-17 10:30
看到这个，又想起那个十六进制颜色在线调配那个帖子了，那个也特别喜欢。

在CSS2时代，建议使用16进制色彩体系，现在，主张使用rgb模式。不过这两种都是可以的，rgb的特点是与浏览器更亲近，同时加入a通道更简单、可靠。

马黑黑

红影 发表于 2023-8-17 10:29
随机点着，欣赏着各种漂亮颜色

点击方框只是为了查看效果，关键是要能理解其中的原理

马黑黑

红影 发表于 2023-8-17 10:16
这个不但能生成随机色，还能随机生成opacity 值，太棒了

实现的方法很多，这个大约是比较简单的

红影

马黑黑 发表于 2023-8-17 12:28
在CSS2时代，建议使用16进制色彩体系，现在，主张使用rgb模式。不过这两种都是可以的，rgb的特点是与浏览 ...

是的，这个和hsl一样，都能加入a通道，对透明度的调整在设置颜色的同时就是完成，很方便。

红影

马黑黑 发表于 2023-8-17 12:29
点击方框只是为了查看效果，关键是要能理解其中的原理

map 方法不熟悉，不过这个很简洁，一下子就能取得随机数呢。

红影

马黑黑 发表于 2023-8-17 12:30
实现的方法很多，这个大约是比较简单的

是的，代码非常少。

马黑黑

红影 发表于 2023-8-17 13:29
是的，代码非常少。

高效就好

马黑黑

红影 发表于 2023-8-17 13:29
map 方法不熟悉，不过这个很简洁，一下子就能取得随机数呢。

map方法，不修改原数组，是在原数组的基础上加工里面数组元素的内容，然后将新的数组内容生成一个新的数组。map方法，会跳过空数组。例如：

<div id="mydiv"></div>

<script>
let arr1 = new Array(20);
let arr2 = arr1.map((item,idx) => idx);
mydiv.innerText = arr1 + '\n' + arr2;
</script>

结果是这样：
,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,

两行都是空数组，map不处理 arr1 的任何一个数组元素。这是因为，arr1 = new Array(20) 这一句，它只生成了一个有数组长度、没有数组元素内容的数组 arr1，map会跳过空数组元素即不做处理。

倘若我们给 arr1 填充数组元素，哪怕只是填充空的数组元素：

    let arr1 = new Array(20).fill('');

则，经过 map 处理后，arr1 和 arr2 两个数组打印出来，是这样：

,,,,,,,,,,,,,,,,,,,
0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19


arr1没有变化，因为我们填充的是空值，但它的每一个数组元素都是有值的，不再是空的数组元素，而是具有空值的数组元素的数组，这样，map就会处理每一个arr1的数组元素最后赋值给 arr2（map以数组索引号填充了 arr2 的每一个数组元素)。

马黑黑

红影 发表于 2023-8-17 13:26
是的，这个和hsl一样，都能加入a通道，对透明度的调整在设置颜色的同时就是完成，很方便。

但是浏览器会更倾向于 rgb，同其他的颜色表发方式，它还是会转为 rgb，因此可以认为，直接使用 rgb 渲染速度会更快（虽然感觉不到），也更节省资源。

红影

马黑黑 发表于 2023-8-17 18:34
高效就好

简洁的代码最需要功夫了。

红影

马黑黑 发表于 2023-8-17 18:48
map方法，不修改原数组，是在原数组的基础上加工里面数组元素的内容，然后将新的数组内容生成一个新的数 ...

要是给了这个数组的具体数字，map可以在里面随机取值？

红影

马黑黑 发表于 2023-8-17 18:53
但是浏览器会更倾向于 rgb，同其他的颜色表发方式，它还是会转为 rgb，因此可以认为，直接使用 rgb 渲染 ...

“同其他的颜色表发方式，它还是会转为 rgb”
这个还是第一次知道呢。

马黑黑

红影 发表于 2023-8-17 20:32
“同其他的颜色表发方式，它还是会转为 rgb”
这个还是第一次知道呢。

如果使用F12查看页面的元素，会发现颜色的设置都是rgb