如何使用 JS 在 canvas 中为每个 object 获得随机 colors？

Question

我想为 canvas 中的每个 object 随机获取 colors 我该怎么做，我试过这个：

for (var i = 0; i < 100; i++) {
    var raza = (Math.random() - 0.001) * 30;
    var x = Math.random() * (innerWidth - raza * 2) + raza;
    var y = Math.random() * (innerHeight - raza * 2) + raza;
    var dx = (Math.random() - 0.5) * 4; //calcul viteza X
    var dy = (Math.random() - 0.5) * 4; //calcul viteza Y
    var color = c.strokeStyle = "#" + ((1 << 24) * Math.random() | 0).toString(12);
    cercArray.push(new Circle(x, y, dx, dy, raza, color));
}

Answer 1

有很多不同的方法可以做到这一点，这里是一个使用 HSL 的例子。

 const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d'); let lastDate = Date.now() - 500; function draw() { requestAnimationFrame(draw); const color = { h: Math.floor(Math.random() * 360), s: Math.floor(Math.random() * 100), v: Math.floor(Math.random() * 100) }; if (lastDate + 500 < Date.now()) { lastDate = Date.now(); ctx.fillStyle = `hsl(${color.h},${color.s}%,${color.v}%)`; ctx.fillRect(0, 0, 100, 100); } } draw();

 <canvas></canvas>