如何在画布中创建不同颜色的多个气泡

Question

我正在制作一个泡泡射击游戏，但气泡只是用相同的颜色着色。如何使颜色选择随机化，然后在画布上的气泡上获得不同的颜色？

function draw() {
  ctx.beginPath();
  ctx.arc(bubble.x, bubble.y, bubble.radius, bubble.wi4, (bubble.wi5 * Math.PI));
  ctx.stroke();
  ctx.fillStyle = randomColor;
  ctx.fill();
  bubble.x += bubble.dx

  if (bubble.x > innerWidth || bubble.x - boble.radius < 0) {
    bubble.y += 42
    bubble.dx = -bubble.dx
}

Answer 1

您可以创建一个简单的函数来生成十六进制颜色

function randomHexColor(){
  let randomHex = '#';
  for(let i = 0 ;i < 6; i++){
    randomHex += [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f'][Math.floor(Math.random()*16)];
  }
  return randomHex;
}
console.log(randomHexColor())

然后分配它

ctx.fillStyle = randomHexColor()