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

时间:2019-03-29 08:55:10

标签: javascript html5 html5-canvas

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

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
}

1 个答案:

答案 0 :(得分:0)

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

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()