每個畫圈的亂數

我正在制作一個影片，顯示從左到右的數字圓圈。

我得到了這個影片，但是每個圓的數字總是相同的，而我需要它不同。我有一個變數可以將數字從1到60隨機化，但我唯一能使它發揮作用的方法是在繪制圓圈的函式中呼叫它（這就是為什么所有圓圈的數字都是一樣的）。

誰能在正確的方向上指點我，讓我能夠完成代碼？我的代碼如下（我知道這不是最優雅的代碼，我還在學習）：

// Single Animated Circle - Get Canvas element by Id。 var canvas = document.getElementById("canvas") 。 //設定畫布尺寸 canvas.width = 300; canvas.height = 900; //獲取繪圖背景關系 //獲取繪圖背景關系 var ctx = canvas.getContext("2d")。 //橈骨 var radius = 13; //起始位置 //起始位置 var x = radius; var y = radius; //x和y方向的速度 var dx = 1; var dy = 0; //加入亂數; 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); /span> } 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"/span>; } else if (randomNumber > 10 && randomNumber < = 20) { ctx.strokeStyle = "#f10b0b"/span>。 } else if (randomNumber > 20 && randomNumber < = 30) { ctx.strokeStyle = "#0bf163"/span>。 } else if (randomNumber > 30 && randomNumber < = 40) { ctx.strokeStyle = "#f1da0b"/span>。 } else if (randomNumber > 40 && randomNumber < = 50) { ctx.strokeStyle = "#950bf1"/span>。 } else if (randomNumber > 50 && randomNumber < = 60) { ctx.strokeStyle = "#0bf1e5"/span>。 } circles = []; circles.push(new Circle({ radius, x, y, dx, dy }) )。 setTimeout(function () { 圓圈。 push(new Circle({ radius, x, y: y * 4, dx, dy })。 }, 500）。) setTimeout(function () { 圓圈。 push(new Circle({ radius, x, y: y * 8, dx, dy })。 }, 1000）。) setTimeout(function () { 圓圈。 push(new Circle({ radius, x, y: y * 12, dx, dy })。 }, 1500）。) setTimeout(function () { 圓圈。 push(new Circle({ radius, x, y: y * 16, dx, dy })。 }, 2000）。) setTimeout(function () { 圓圈。 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()。

uj5u.com熱心網友回復：

你可以把你的亂數放在類中：

顯示代碼片段

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

//設定畫布尺寸
canvas.width = 300;
canvas.height = 900;

//獲取繪圖背景關系 //獲取繪圖背景關系
var ctx = canvas.getContext("2d")。

//橈骨
var radius = 13;
//起始位置 //起始位置
var x = radius;
var y = radius;

//x和y方向的速度
var dx = 1;
var dy = 0;

//加入亂數; //加入亂數。
//var randomNumber = Math.floor(Math.random() * 60)   1; 
//函式 generateNumbers() {
//var temp = Math.floor(Math.random() * 60)   1; 
// if (randomNumber.indexOf(temp) == -1) {
// randomNumber.push(temp);
/span> } else {
// i--;
// }
// }
let getColor=（rn）=> {
  if (rn > 0 && rn < = 10) {
  return "#0b0bf1"/span>。
  } else if (rn > 10 && rn <=20) {
    return "#f10b0b"/span>;
  } else if (rn > 20 & & rn <=30) {
    return "#0bf163"/span>。
  } else if (rn > 30 && rn < = 40) {
    return "#f1da0b"/span>。
  } else if (rn > 40 && rn < = 50) {
    return "#950bf1"/span>。
  } else if (rn > 50 && rn < = 60) {
    return "#0bf1e5"/span>。
  }
}
class Circle {
  constructor（data） {
    this.data = data;
    this.rn = Math. floor(Math.random() * 60)    1  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 () {
  圓圈。 push(new Circle({ radius, x, y: y * 4, dx, dy })。
}, 500）。)
setTimeout(function () {
  圓圈。 push(new Circle({ radius, x, y: y * 8, dx, dy })。
}, 1000）。)
setTimeout(function () {
  圓圈。 push(new Circle({ radius, x, y: y * 12, dx, dy })。
}, 1500）。)
setTimeout(function () {
  圓圈。 push(new Circle({ radius, x, y: y * 16, dx, dy })。
}, 2000）。)
setTimeout(function () {
  圓圈。 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> 

標籤：

上一篇：在SwiftUI中粘貼文字時，如何讓OTP中的線條影片一次次移動？

下一篇：組元素的過渡轉換屬性在火狐瀏覽器中不作業