每个绘图圈的随机数

Question

我正在制作一个动画，显示从左到右的编号圆圈。

我开始播放动画，但每个圆圈的编号始终相同，我需要它有所不同。我有一个变量，可以将数字从 1 随机化到 60，但我可以让它工作的唯一方法是在绘制圆的函数中调用它（这就是为什么所有圆的数字都相同）。

任何人都可以在正确的方向推动我，这样我就可以完成代码吗？我有以下内容（我知道这不是最优雅的代码，我还在学习）：

// Single Animated Circle - Get Canvas element by Id
var canvas = document.getElementById("canvas");

// Set Canvas dimensions
canvas.width = 300;
canvas.height = 900;

// Get drawing context
var ctx = canvas.getContext("2d");

// Radius
var radius = 13;
// Starting Position
var x = radius;
var y = radius;

// Speed in x and y direction
var dx = 1;
var dy = 0;

// Add random number
var randomNumber = Math.floor(Math.random() * 60) + 1;

// function generateNumbers() {
//   var temp = Math.floor(Math.random() * 60) + 1;
//   if (randomNumber.indexOf(temp) == -1) {
//     randomNumber.push(temp);
//   } else {
//     i--;
//   }
// }

class Circle {
  constructor(data) {
    this.data = data;
  }

  draw() {
    if (
      this.data.x + this.data.radius > 300 ||
      this.data.x - this.data.radius < 0
    ) {
      this.data.x = this.data.radius;
    }
    this.data.x += this.data.dx;

    ctx.beginPath();
    ctx.arc(this.data.x, this.data.y, this.data.radius, 0, Math.PI * 2, false);
    ctx.stroke();
    ctx.fillText(randomNumber, this.data.x - 5, this.data.y + 3);
  }
}

if (randomNumber > 0 && randomNumber <= 10) {
  ctx.strokeStyle = "#0b0bf1";
} else if (randomNumber > 10 && randomNumber <= 20) {
  ctx.strokeStyle = "#f10b0b";
} else if (randomNumber > 20 && randomNumber <= 30) {
  ctx.strokeStyle = "#0bf163";
} else if (randomNumber > 30 && randomNumber <= 40) {
  ctx.strokeStyle = "#f1da0b";
} else if (randomNumber > 40 && randomNumber <= 50) {
  ctx.strokeStyle = "#950bf1";
} else if (randomNumber > 50 && randomNumber <= 60) {
  ctx.strokeStyle = "#0bf1e5";
}

circles = [];

circles.push(new Circle({ radius, x, y, dx, dy }));
setTimeout(function () {
  circles.push(new Circle({ radius, x, y: y * 4, dx, dy }));
}, 500);
setTimeout(function () {
  circles.push(new Circle({ radius, x, y: y * 8, dx, dy }));
}, 1000);
setTimeout(function () {
  circles.push(new Circle({ radius, x, y: y * 12, dx, dy }));
}, 1500);
setTimeout(function () {
  circles.push(new Circle({ radius, x, y: y * 16, dx, dy }));
}, 2000);
setTimeout(function () {
  circles.push(new Circle({ radius, x, y: y * 20, dx, dy }));
}, 2500);

function animate3() {
  requestAnimationFrame(animate3);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  circles.forEach((item) => item.draw());
}
//generateNumbers();
animate3();

Answer 1

你可以把你的随机数放在class:

// Single Animated Circle - Get Canvas element by Id
var canvas = document.getElementById("canvas");

// Set Canvas dimensions
canvas.width = 300;
canvas.height = 900;

// Get drawing context
var ctx = canvas.getContext("2d");

// Radius
var radius = 13;
// Starting Position
var x = radius;
var y = radius;

// Speed in x and y direction
var dx = 1;
var dy = 0;

// Add random number
//var randomNumber = Math.floor(Math.random() * 60) + 1;
// function generateNumbers() {
//   var temp = Math.floor(Math.random() * 60) + 1;
//   if (randomNumber.indexOf(temp) == -1) {
//     randomNumber.push(temp);
//   } else {
//     i--;
//   }
// }
let getColor = (rn) => {
  if (rn > 0 && rn <= 10) {
  return "#0b0bf1";
  } else if (rn > 10 && rn <= 20) {
    return "#f10b0b";
  } else if (rn > 20 && rn <= 30) {
    return "#0bf163";
  } else if (rn > 30 && rn <= 40) {
    return "#f1da0b";
  } else if (rn > 40 && rn <= 50) {
    return "#950bf1";
  } else if (rn > 50 && rn <= 60) {
    return "#0bf1e5";
  }
}
class Circle {
  constructor(data) {
    this.data = data;
    this.rn = Math.floor(Math.random() * 60) + 1
    this.color = getColor(this.rn)
  }
  draw() {
    if (
      this.data.x + this.data.radius > 300 ||
      this.data.x - this.data.radius < 0
    ) {
      this.data.x = this.data.radius;
    }
    this.data.x += this.data.dx;

    ctx.beginPath();
    ctx.arc(this.data.x, this.data.y, this.data.radius, 0, Math.PI * 2, false);
    ctx.stroke();
    ctx.fillText(this.rn, this.data.x - 5, this.data.y + 3);
    ctx.strokeStyle = this.color
  }
}

/*if (randomNumber > 0 && randomNumber <= 10) {
  ctx.strokeStyle = "#0b0bf1";
} else if (randomNumber > 10 && randomNumber <= 20) {
  ctx.strokeStyle = "#f10b0b";
} else if (randomNumber > 20 && randomNumber <= 30) {
  ctx.strokeStyle = "#0bf163";
} else if (randomNumber > 30 && randomNumber <= 40) {
  ctx.strokeStyle = "#f1da0b";
} else if (randomNumber > 40 && randomNumber <= 50) {
  ctx.strokeStyle = "#950bf1";
} else if (randomNumber > 50 && randomNumber <= 60) {
  ctx.strokeStyle = "#0bf1e5";
}*/

circles = [];

circles.push(new Circle({ radius, x, y, dx, dy }));
setTimeout(function () {
  circles.push(new Circle({ radius, x, y: y * 4, dx, dy }));
}, 500);
setTimeout(function () {
  circles.push(new Circle({ radius, x, y: y * 8, dx, dy }));
}, 1000);
setTimeout(function () {
  circles.push(new Circle({ radius, x, y: y * 12, dx, dy }));
}, 1500);
setTimeout(function () {
  circles.push(new Circle({ radius, x, y: y * 16, dx, dy }));
}, 2000);
setTimeout(function () {
  circles.push(new Circle({ radius, x, y: y * 20, dx, dy }));
}, 2500);

function animate3() {
  requestAnimationFrame(animate3);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  circles.forEach((item) => item.draw());
}
//generateNumbers();
animate3();

<canvas id="canvas"></canvas>

每个绘图圈的随机数

Random number for each drawing circle

javascript

random

animation

geometry

numbers