如何在javascript中生成随机灰色

我有一个函数，只想生成灰色。如何使用下面的代码执行此操作？我对javascript非常陌生！我非常感谢你的帮助。我正在使用Paper.js

 function onMouseDown(event) {
        path = new Path();
        path.fillColor = {
            hue: Math.random() * 360,
            //saturation: 0,
            //brightness: 0.5
        };

        path.add(event.point);
    }

你可以使用图书馆

要生成随机灰色，它将是：

randomColor({hue: 'monochrome', count: 1});

然而，这也包括黑色。您可以使用“亮度”键设置为“灯光”，只获得真正的灰色

randomColor({hue: 'monochrome',luminosity: 'light', count: 1});

一个小型演示，模拟我们在GitHub repo上找到的彩色球：

var colors=randomColor({
色调：“单色”，
计数：5，
亮度：“光”
});
var myDiv=document.getElementById（'squares'）；
颜色。forEach（功能（颜色）{
myDiv.innerHTML+=``
});
.circle:在{
内容：'\25CF'；
字体大小：100px；
}
由于灰色具有相等的RGB分量，因此您可以生成范围为0-ff的十六进制，并将其用于R、G、B部件：


函数randomGreyHex（）{
var v=（Math.random（）*（256）| 0）.toString（16）；//按位或.给出0-255范围内的值，然后转换为基数16（十六进制）。
返回“#”+v+v+v；
}
/*演示用途：*/
var div=document.querySelector（“div”）；
div.addEventListener（“单击”，函数（）{
var grey=randomGreyHex（）；
this.style.backgroundColor=灰色；
this.innerHTML=灰色；
});
div{
高度：100px；
边框：1px纯红；
文本阴影：0 10px白色；
}
单击我
因为您提供的示例接受HSB颜色，您只需生成一个随机亮度值即可。饱和度应为0（完全去饱和），色调也可以为0，因为它是多余的

亮度值应为介于0和1之间的数字。因为你特别想要灰色，你可能想要得到一个既不太暗也不太亮的值。我们可以用一个小方法返回两个值之间的随机数

function getRandomInRange(min, max) {
  return Math.random() * (max - min) + min;
}

因此，在您的代码中，您可以这样使用它：

function onMouseDown(event) {
    path = new Path();
    path.fillColor = {
        hue: 0, 
        saturation: 0,
        brightness: getRandomInRange(0.2, 0.8)
    };

    path.add(event.point);
}

更新

Paper.js有一个同样适合在这里使用的。它从0到1取一个数字（其中0为黑色），因此
getRandomInRange
在这里同样适用：

path.fillColor = new Color(getRandomInRange(0.2, 0.8)); //a random grey

好吧，我看你比我强！：-）如果OP对使用RGB感兴趣，那么我举了一个例子，在这个例子中，颜色有一些轻微的变化，并且仅限于一些中频色调（不是100%黑色，也不是100%白色）。但是，您是否介意详细解释一下
（255）| 0）
部分的功能？我看到它按预期工作，返回0到255之间的数字，这是一个很棒的方法，我只是以前没有见过它，我想知道它背后的技术性？@Chri.s它是一个，有效地截断小数点处的随机数（从这个意义上讲，与Math.floor相同）@Chri.s您的评论让我重新评估了我的代码。。由于
Math.random（）
返回一个从0（包括）到1（排除）的数字，很明显
Math.random（）*255
实际上永远不可能是255，所以我将其更新为256，以便在铺设地板时最大值为255（ff）。谢谢。看起来你在用某种图书馆。我不认识它。可能是Paper.js？也许是你自己的。你能告诉我们是什么吗？如果它是Paper.js，则可以为其提供十六进制颜色，而不是示例中的HSL分隔。请看：@Moob我确实在使用paper.js！谢谢你的回复。我应该在我的问题中澄清这一点。不确定您正在使用的库，但是如果它期望百分比，可以使用
getRandomInRange（0100）
。谢谢@Moob！这很有效。你太棒了。