我正在使用 chart.js 创建饼图,在创建图表时,我使用以下函数生成随机颜色:
getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
但是,这会生成没有任何类型过滤器的颜色,我只想生成明亮的颜色,避免灰色、黑色或暗淡,我该如何过滤或改进现有功能?
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
var str = "<div style='background-color:"+color+"'><button id='b1'>hola</button></div>"
document.write(str);
return color;
}
console.log(getRandomColor());
为了获得生动明亮的颜色来绘制图形,我们可以基于以下事实:
明亮色彩的光谱如下:
该光谱中的颜色的特征在于,在其组成中,三种原色中的一种处于最大值 (FF),另一种处于最小值 (00),而另一种在最小值和最大值之间变化。
因此,鲜艳颜色的 HTML 代码可以表示为 3 个字符(FF、00 和另一个随机字符)的排列。
为了模拟这些排列,我们可以按如下方式建立字符数组:
'0' 和 'F' 可以用来代替 '00' 和 'FF' 因为 HTML 颜色也可以用 3 个字符表示,那么 的值
num
将在 0、4、8 和 C 十六进制之间变化(做这种分离以便颜色之间有更多的对比)。然后我们通过从数组中抽取一个随机字符将其添加到字符串中来获得排列
color
:我们可以将已经使用的颜色存储在一个数组中,以避免重复以下行:
这样代码如下,本例中随机生成20种不同的亮色:
通过这种方式,可以生成醒目的颜色,避免暗淡的颜色、灰色、白色和黑色、问候。
我可以想到另一个解决方案:使用十六进制数字的生成,我发现很难尝试通过生成柔和或浅色的规则进行过滤。
解决问题的另一种方法是使用RGB颜色生成这里你可以为三个通道制作一个单独的随机生成器并限制由高值和低值生成的数字范围(120到240之间)以避免颜色深。
这是新代码:
按下颜色按钮克隆一个新的 div 并生成另一种颜色,克隆的 div 有一个标题来标识它的颜色
rgb()
灰色的特点是它们在 3 个 RGB 通道中具有相同的值,例如
当 3 个通道的值接近 0 时获得黑色,当值接近 255 时获得白色。
在您的情况下,值是十六进制的,因此我们将通道划分为从#000000(黑色)到#FFFFFF(白色)的值,每对值对应一个通道,但是我们可以工作具有#000到#FFF的值,尽管可能性(组合)数量减少,但这是几乎等效的形式。
现在我们只需要避免 3 个通道等于或接近白色或黑色:
我只对最后一个值进行比较,因为是否有两个相等的通道并不重要,重要的是 3 不相等,所以你只需要避免第三个已经重复。
我认为答案应该朝着使用 HSV 而不是 RGB 的方向发展。
在 HSV 中,颜色由三个数字标识,每个数字介于 0 和 1 之间,第一个是“色调”(“色调”,或者我们简称为“颜色”,这是区分红色和绿色的原因,例如例如),第二个是饱和度(越高,颜色越“纯”,越低,它与白色混合得越多,变得更“柔和”,在低饱和度时变成灰色),第三个是值,或亮度(如果它接近 0,它会发射黑色,如果它接近 1,它会抛出相应的颜色)。
使用此方案,您只需将 1 设置为饱和度并将 1 设置为值,即可获得“鲜艳”的颜色。为“色调”玩不同的值,你会得到不同的颜色,它们都是“活的”。如果您希望它们更“柔和”,例如将饱和度更改为 0.5。
下面是一个从 HSV 模型转换为 RGB 的函数示例,以及一个循环遍历不同“色调”以生成不同颜色的循环。它通过控制台以十六进制打印它们,并顺便将它们绘制在画布上供您查看。