Есть ли способ использовать переменную в качестве параметра в rgba () в JavaScript? - PullRequest
Новая
       96

Есть ли способ использовать переменную в качестве параметра в rgba () в JavaScript?

0 голосов
/ 02 мая 2020

Это мой Javascript код. 

var radius = random(20,200);
    var randRed = random(210,255);
    var randAlpha = random(0.25,0.4);
    var Color = 'rgba(255,255,255,0.25)';
    this.x = random(100, 700);
    this.y = random(100, 500);
    this.width = radius;
    this.height = radius;
    this.color = Color;
    this.velocityX = random(-5, +5);
    this.velocityY= random(-5, +5);

Для контекста это используется в конструкторе в классе Bubble для создания случайных круглых пузырьков. Я нашел способ рандомизировать радиус и положение, но есть ли способ использовать randRed и randAlpha в качестве красного и альфа-значения для rgba() в переменной Color?

Я хочу чтобы иметь возможность сделать что-то вроде: 

var Color = 'rgba(randRed,255,255,randAlpha);

Возможно ли это? Вот остаток кода: 

class Bubble {

  constructor() {
    var allInstances = [];

    var radius = random(20, 200);
    var randRed = random(210, 255);
    var randAlpha = random(0.25, 0.4);
    var Color = 'rgba(255,255,255,0.25)';
    this.x = random(100, 700);
    this.y = random(100, 500);
    this.width = radius;
    this.height = radius;
    this.color = Color;
    this.velocityX = random(-5, +5);
    this.velocityY = random(-5, +5);

    this.display = function() {
      stroke(255);
      fill(this.color);
      ellipse(this.x, this.y, this.width, this.height);
    }

    this.move = function() {
      this.x = this.x + this.velocityX;
      this.y = this.y + this.velocityY;
    }

  }
}

var bubbles = [];

function setup() {
  createCanvas(800, 600);
  bubble1 = new Bubble();
  bubble2 = new Bubble();
  bubble3 = new Bubble();
  bubble4 = new Bubble();
  bubble5 = new Bubble();
  bubble6 = new Bubble();
}


function draw() {
  background(56, 226, 232);
  bubble1.move();
  bubble2.move();
  bubble3.move();
  bubble4.move();
  bubble5.move();
  bubble6.move();

  bubble1.display();
  bubble2.display();
  bubble3.display();
  bubble4.display();
  bubble5.display();
  bubble6.display();
}

setInterval(function() {
  setup();
  draw();
}, 2900);
html,
body {
  margin: 0;
  padding: 0;
}

canvas {
  display: block;
}
<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.sound.min.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta charset="utf-8" />
</head>

<body>
  <script src="sketch.js"></script>
</body>

</html>

1 Ответ

0 голосов
/ 02 мая 2020

Попробуйте литералы шаблона: 

let randRed = parseInt(random(210, 255));
let randAlpha = random(0.25, 0.40).toFixed(2);
let color = `rgba(${randRed}, 255, 255, ${randAlpha})`;

praseInt (x) анализирует x и возвращает целое число. Например: 

let num = '210.23';
let res = parseInt(num); // res will be equal to 210

y.toFixed (x) округляет число от y до x десятичных разрядов. Например: 

let num = 0.288682;
let res = num.toFixed(2); // res will be equal to 0.29

Примечание. Вы можете вызвать toFixed (), чтобы округлить число до нуля. ie, вы также можете вызвать toFixed () для randRed.

...