Добавление случайного параметра цвета в функцию

Question

Добавление случайного параметра цвета в функцию

1

Как только заголовок говорит, я пытаюсь добавить случайный параметр цвета (как 4-й параметр) к ранее существовавшей функции. Я много пробовал, но ничего не работает.

Это то, с чем я работаю. Я знаю, это неэффективно, но я новичок. Это улыбающееся лицо. Мне нужно добавить случайный параметр цвета, чтобы изменился только первый "fillStyle", но остальные цвета остались прежними. Как я могу это достичь?

var canvas = document.getElementById("cnv"),
  context = canvas.getContext('2d'),
  width = 500,
  height = 500;

function pintaSmiley(cX, cY, s) {
  "use strict";
  context.beginPath();
  context.fillStyle = "yellow";
  context.arc(cX, cY, 100 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.lineWidth = 2;
  context.stroke();
  context.fillStyle = "black";
  context.moveTo(55, 50);
  context.beginPath();
  context.fillStyle = "white";
  context.arc(cX - 35 * s, cY - 38 * s, 16 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.lineWidth = 2;
  context.stroke();
  context.moveTo(103, 49);
  context.beginPath();
  context.fillStyle = "white";
  context.arc(cX + 35 * s, cY - 38 * s, 16 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.lineWidth = 2;
  context.stroke();
  context.moveTo(55, 50);
  context.beginPath();
  context.fillStyle = "black";
  context.arc(cX - 32 * s, cY - 43 * s, 9 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.moveTo(103, 49);
  context.beginPath();
  context.fillStyle = "black";
  context.arc(cX + 38 * s, cY - 43 * s, 9 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.moveTo(105, 75);
  context.beginPath();
  context.fillStyle = 'rgba(0, 0, 0, 1)';
  context.arc(cX, cY + 10 * s, 60 * s, 0, Math.PI, false);
  context.closePath();
  context.fill();
}

for (i = 0; i < 94; i = i + 1) {
  centerX = Math.floor((Math.random() * width) + 1);
  centerY = Math.floor((Math.random() * height) + 1);
  size = 15;
  size = size / 100;
  pintaSmiley(centerX, centerY, size);
}

pintaSmiley(centerX, centerY, size * 14);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.1);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.2);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.3);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.4);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.5);

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

Dogukan TUNA 07 нояб. 2017, в 11:32

Источник

0

в чем проблема
Bhargav Chudasama 07 нояб. 2017, в 10:16

Теги:

javascript

3 ответа

0

Возможно, вы можете использовать режим HSL Color и использовать его со случайным значением оттенка.

context.fillStyle = "hsl("+Math.round(Math.random()*360)+",100%,50%)";

var canvas = document.getElementById("cnv"),
  context = canvas.getContext('2d'),
  width = 500,
  height = 500;

function pintaSmiley(cX, cY, s, hue) {
  "use strict";
  context.beginPath();
  context.fillStyle = "hsl("+hue+",100%,50%)";
  context.arc(cX, cY, 100 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.lineWidth = 2;
  context.stroke();
  context.fillStyle = "black";
  context.moveTo(55, 50);
  context.beginPath();
  context.fillStyle = "white";
  context.arc(cX - 35 * s, cY - 38 * s, 16 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.lineWidth = 2;
  context.stroke();
  context.moveTo(103, 49);
  context.beginPath();
  context.fillStyle = "white";
  context.arc(cX + 35 * s, cY - 38 * s, 16 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.lineWidth = 2;
  context.stroke();
  context.moveTo(55, 50);
  context.beginPath();
  context.fillStyle = "black";
  context.arc(cX - 32 * s, cY - 43 * s, 9 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.moveTo(103, 49);
  context.beginPath();
  context.fillStyle = "black";
  context.arc(cX + 38 * s, cY - 43 * s, 9 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.moveTo(105, 75);
  context.beginPath();
  context.fillStyle = 'rgba(0, 0, 0, 1)';
  context.arc(cX, cY + 10 * s, 60 * s, 0, Math.PI, false);
  context.closePath();
  context.fill();
}

for (i = 0; i < 94; i = i + 1) {
  centerX = Math.floor((Math.random() * width) + 1);
  centerY = Math.floor((Math.random() * height) + 1);
  size = 15;
  size = size / 100;
  pintaSmiley(centerX, centerY, size, Math.round(Math.random()*360));
}

pintaSmiley(centerX, centerY, size * 14, Math.round(Math.random()*360));
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.1, Math.round(Math.random()*360));
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.2, Math.round(Math.random()*360));
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.3, Math.round(Math.random()*360));
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.4, Math.round(Math.random()*360));
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.5, Math.round(Math.random()*360));

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

Manuel Otto 07 нояб. 2017, в 09:18

0

Это тоже приятно :)
mplungjan 07 нояб. 2017, в 10:27
0

Это очень красиво, но мне нужен четвертый параметр для функции «pintaSmiley», что-то вроде «pintaSmiley (cX, cY, s, color)» :)
Dogukan TUNA 07 нояб. 2017, в 19:10
0

@DogukanTUNA вы можете сделать оттенок в качестве параметра. Я обновил фрагмент, проверьте его.
Manuel Otto 08 нояб. 2017, в 07:30

Показать ещё 1 комментарий

0

Вы можете использовать функцию для генерации случайного цвета.

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

var canvas = document.getElementById("cnv"),
  context = canvas.getContext('2d'),
  width = 500,
  height = 500;

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

function pintaSmiley(cX, cY, s) {
  "use strict";
  context.beginPath();
  context.fillStyle = getRandomColor();
  context.arc(cX, cY, 100 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.lineWidth = 2;
  context.stroke();
  context.fillStyle = "black";
  context.moveTo(55, 50);
  context.beginPath();
  context.fillStyle = "white";
  context.arc(cX - 35 * s, cY - 38 * s, 16 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.lineWidth = 2;
  context.stroke();
  context.moveTo(103, 49);
  context.beginPath();
  context.fillStyle = "white";
  context.arc(cX + 35 * s, cY - 38 * s, 16 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.lineWidth = 2;
  context.stroke();
  context.moveTo(55, 50);
  context.beginPath();
  context.fillStyle = "black";
  context.arc(cX - 32 * s, cY - 43 * s, 9 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.moveTo(103, 49);
  context.beginPath();
  context.fillStyle = "black";
  context.arc(cX + 38 * s, cY - 43 * s, 9 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.moveTo(105, 75);
  context.beginPath();
  context.fillStyle = 'rgba(0, 0, 0, 1)';
  context.arc(cX, cY + 10 * s, 60 * s, 0, Math.PI, false);
  context.closePath();
  context.fill();
}

for (i = 0; i < 94; i = i + 1) {
  centerX = Math.floor((Math.random() * width) + 1);
  centerY = Math.floor((Math.random() * height) + 1);
  size = 15;
  size = size / 100;
  pintaSmiley(centerX, centerY, size);
}

pintaSmiley(centerX, centerY, size * 14);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.1);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.2);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.3);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.4);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.5);

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

coudy.one 07 нояб. 2017, в 08:21

0

Забавно, как твои цвета приглушены по сравнению с HSL
mplungjan 07 нояб. 2017, в 10:30
0

Это действительно полезно, большое спасибо, но мне нужен четвертый параметр для функции «pintaSmiley» :)
Dogukan TUNA 07 нояб. 2017, в 19:09

Ещё вопросы

Это очень красиво, но мне нужен четвертый параметр для функции «pintaSmiley», что-то вроде «pintaSmiley (cX, cY, s, color)» :)
@DogukanTUNA вы можете сделать оттенок в качестве параметра. Я обновил фрагмент, проверьте его.
Забавно, как твои цвета приглушены по сравнению с HSL
Это действительно полезно, большое спасибо, но мне нужен четвертый параметр для функции «pintaSmiley» :)

mplungjan · Accepted Answer · 2017-11-07T08-03-00.000Z

Ты имеешь в виду

context.fillStyle = ["yellow","red","green"][Math.floor(Math.random()*3)];

или, возможно,

var bgArr = ["yellow","red","green"];
var rndBg = bgArr[Math.floor(Math.random()*bgArr.length)];
pintaSmiley(centerX, centerY, size, rndBg);

с помощью

function pintaSmiley(cX, cY, s, bg) {
  "use strict";
  context.beginPath();
  context.fillStyle = bg;

Вот первое:

var canvas = document.getElementById("cnv"),
  context = canvas.getContext('2d'),
  width = 500,
  height = 500;

function pintaSmiley(cX, cY, s) {
  "use strict";
  context.beginPath();
  context.fillStyle = ["yellow","red","green"][Math.floor(Math.random()*3)];
  context.arc(cX, cY, 100 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.lineWidth = 2;
  context.stroke();
  context.fillStyle = "black";
  context.moveTo(55, 50);
  context.beginPath();
  context.fillStyle = "white";
  context.arc(cX - 35 * s, cY - 38 * s, 16 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.lineWidth = 2;
  context.stroke();
  context.moveTo(103, 49);
  context.beginPath();
  context.fillStyle = "white";
  context.arc(cX + 35 * s, cY - 38 * s, 16 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.lineWidth = 2;
  context.stroke();
  context.moveTo(55, 50);
  context.beginPath();
  context.fillStyle = "black";
  context.arc(cX - 32 * s, cY - 43 * s, 9 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.moveTo(103, 49);
  context.beginPath();
  context.fillStyle = "black";
  context.arc(cX + 38 * s, cY - 43 * s, 9 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.moveTo(105, 75);
  context.beginPath();
  context.fillStyle = 'rgba(0, 0, 0, 1)';
  context.arc(cX, cY + 10 * s, 60 * s, 0, Math.PI, false);
  context.closePath();
  context.fill();
}

for (i = 0; i < 94; i = i + 1) {
  centerX = Math.floor((Math.random() * width) + 1);
  centerY = Math.floor((Math.random() * height) + 1);
  size = 15;
  size = size / 100;
  pintaSmiley(centerX, centerY, size);
}

pintaSmiley(centerX, centerY, size * 14);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.1);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.2);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.3);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.4);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.5);

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