Javascript Использование Math.random для генерации случайных значений RGBA в цикле for - PullRequest
Новая
       26

Javascript Использование Math.random для генерации случайных значений RGBA в цикле for

0 голосов
/ 25 декабря 2018

Я очень новичок в этом и прошу прощения, если это глупый вопрос.Это просто цикл for для рисования n кругов, и я хочу случайным образом сгенерировать значения rgba, но вместо этого он использует последний использованный strokeStyle, что я делаю не так? 

for (var i = 0; i < 10; i++){
var x = Math.random() * window.innerWidth;
var y = Math.random() * window.innerHeight;
var colour = Math.random() * 255;

c.beginPath();
c.arc(x, y, 30, 0, Math.PI * 2, false);
c.strokeStyle = 'rgba(colour, colour, colour, Math.random())';
c.stroke(); }

Спасибо вам большое!!

Ответы [ 2 ]

0 голосов
/ 25 декабря 2018

Это можно сделать путем форматирования цветовой строки следующим образом: 

"rgba(" + r + "," + g + "," + b + "," + a + ")";

, где r, g, b - целые числа в диапазоне от 0 до 255 и aявляется плавающей точкой в ​​диапазоне от 0,0 до 1,0;

Полный пример приведен в следующем фрагменте кода: 

var c = document.getElementById("canvas").getContext("2d");

for (var i = 0; i < 10; i++) {

  const x = Math.random() * c.canvas.width;
  const y = Math.random() * c.canvas.height;

  // Red, green, blue should be integers in the range of 0 - 255
  const r = parseInt(Math.random() * 255);
  const g = parseInt(Math.random() * 255);
  const b = parseInt(Math.random() * 255);
  
  // Alpha is a floating point in range of 0.0 - 1.0
  const a = Math.random();

  c.beginPath();
  c.arc(x, y, 30, 0, Math.PI * 2, false);
  c.strokeStyle = "rgba(" + r + "," + g + "," + b + "," + a + ")";
  c.stroke();
}
<canvas id="canvas"></canvas>

В качестве альтернативы, если ваш целевой браузер поддерживает «литералы шаблона», то эту же строку цвета можно отформатировать более кратким способом с помощью следующего: 

const r = parseInt(Math.random() * 255);
const g = parseInt(Math.random() * 255);
const b = parseInt(Math.random() * 255);
const a = Math.random();

// Format color string via template literal using back ticks ` and ${} 
// to render scope variables to the string result
c.strokeStyle = `rgba(${r}, ${g}, ${b}, ${a})`;
0 голосов
/ 25 декабря 2018

'rgba(colour, colour, colour, Math.random())' является литеральной строкой, что делает его недопустимым CSS (поскольку CSS не распознает colour или Math.random()), который будет отброшен.

Возможно, вы захотите шаблонный литерал вместо этого (обратите внимание на другую цитату): 

c.strokeStyle = `rgba(${colour}, ${colour}, ${colour}, ${Math.random()})`

Также обратите внимание, что это не даст вам совершенно случайный цвет;он даст вам случайный серый цвет, поскольку вы связали компоненты R, G и B, чтобы они были одинаковыми colour.Если вы хотите, чтобы три компонента могли различаться, вам нужно сгенерировать новое случайное число для каждого компонента.

...