将随机颜色参数添加到函数

Question

正如标题所说，我正在尝试将一个随机颜色参数（作为第四个参数）添加到预先存在的函数中。我尝试了很多东西，但没有任何工作。

这就是我正在使用的东西。我知道，它效率不高但我是初学者。这是一个笑脸。我需要添加一个随机颜色参数，以便只更改第一个'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>

Answer 1

你的意思是

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>

Answer 2

您可以使用HSL Color模式并将其与随机色调值一起使用。

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

＆＃13;

＆＃13;

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));

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用函数生成随机颜色。

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

＆＃13;

＆＃13;

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);

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;