如何在 javascript 中生成随机灰色

Question

我有一个函数，只想生成灰色。我怎样才能用下面的代码做到这一点？我是 javascript 的新手！我将不胜感激任何帮助。我正在使用 Paper.js

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

        path.add(event.point);
    }

Answer 1

您可以使用 randomColor 库。

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

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

但是，这也包括黑色。您可以将亮度键设置为 "light" 以仅获得真正的灰色。

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

一个小演示，模拟我们在 GitHub 存储库中找到的彩球：

var colours = randomColor({
  hue: 'monochrome',
  count: 5,
  luminosity: 'light'
});

var myDiv = document.getElementById('squares');

colours.forEach(function(colour) {
  myDiv.innerHTML += `<span class="circle" style="color:${colour}"></span>`
});

.circle:before {
  content: ' CF';
  font-size: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/randomcolor/0.5.2/randomColor.min.js"></script>


<div id="squares">

</div>

Answer 2

由于灰色具有相等的 RGB 分量，您可以生成 0 - ff 范围内的十六进制并将其用于每个 R、G、B 部分：

function randomGreyHex() {
  var v = (Math.random()*(256)|0).toString(16);//bitwise OR. Gives value in the range 0-255 which is then converted to base 16 (hex).
  return "#" + v + v + v;
}

/* demo usage: */
var div = document.querySelector("div");
div.addEventListener("click", function() {
  var grey = randomGreyHex();
  this.style.backgroundColor = grey;
  this.innerHTML = grey;
});

div {
  height: 100px;
  border: 1px solid red;
  text-shadow: 0 0 10px white;
}

<div id="div">click me</div>

Answer 3

由于您提供的示例接受 HSB 颜色，因此您可以简单地生成一个随机亮度值。饱和度应为 0（完全去饱和），色调也可以为 0，因为它是多余的。

亮度值应该是介于 0 和 1 之间的数字。由于您特别需要灰色，因此您可能希望获得既不太暗也不太亮的值。我们可以做一个小方法来return两个值之间的随机数。

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 有一个 Color constructor specifically for greyscale 也适合在这里使用。它采用 0 - 1 之间的数字（其中 0 为黑色），因此 getRandomInRange 在这里同样有效：

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

如何在 javascript 中生成随机灰色

How to generate random grey colors in javascript

javascript

paperjs