Question

尝试创建一个方块页面，每个方块都有不同的颜色。到目前为止，我有一个随机颜色生成器可以工作，但到目前为止，它每次加载页面时将每个方块设置为相同的随机颜色，只是试图找出一种方法给每个方块一个不同的随机颜色。

我尝试使用函数创建不同的颜色，但效果不好，这是我的随机数生成器的代码：

var red = Math.floor(Math.random()* 255);
var green = Math.floor(Math.random() * 255);
var blue = Math.floor(Math.random() * 255);

这是我的一个方块的代码（所有方块都有相同的代码，只是不同的坐标）

ctx.rect(820, 50,100,100);
ctx.closePath();
ctx.fillStyle = "rgb("+red+","+green+"," +blue+" )";    
ctx.fill();

整个代码在这里：

＆＃13;

<html>
<canvas id="canvas1" height="768" width="1024" style="border: 1px solid #000000;"></canvas>

<script>
  var canvas = document.getElementById("canvas1");
  var ctx = canvas.getContext("2d");

  var red = Math.floor(Math.random() * 255);
  var green = Math.floor(Math.random() * 255);
  var blue = Math.floor(Math.random() * 255);

  ctx.beginPath();
  ctx.rect(70, 50, 100, 100);
  ctx.closePath();
  ctx.fillStyle = "rgb(" + red + "," + green + "," + blue + " )";
  ctx.fill();

  ctx.rect(220, 50, 100, 100);
  ctx.closePath();
  ctx.fillStyle = "rgb(" + red + "," + green + "," + blue + " )";
  ctx.fill();

  ctx.rect(370, 50, 100, 100);
  ctx.closePath();
  ctx.fillStyle = "rgb(" + red + "," + green + "," + blue + " )";
  ctx.fill();

  ctx.rect(520, 50, 100, 100);
  ctx.closePath();
  ctx.fillStyle = "rgb(" + red + "," + green + "," + blue + " )";
  ctx.fill();

  ctx.rect(670, 50, 100, 100);
  ctx.closePath();
  ctx.fillStyle = "rgb(" + red + "," + green + "," + blue + " )";
  ctx.fill();

  ctx.rect(820, 50, 100, 100);
  ctx.closePath();
  ctx.fillStyle = "rgb(" + red + "," + green + "," + blue + " )";
  ctx.fill();
</script>


</html>

＆＃13;

Answer 1

这只会在绘制矩形之前设置一次颜色;

var red = Math.floor(Math.random()* 255);
var green = Math.floor(Math.random() * 255);
var blue = Math.floor(Math.random() * 255);

您可以创建一个执行此操作并返回值的函数;

function getRandomColour(){
  var red = Math.floor(Math.random()* 255);
  var green = Math.floor(Math.random() * 255);
  var blue = Math.floor(Math.random() * 255);

  return "rgb("+red+","+green+"," +blue+" )";  
}

或者，您可以在数组中预定义矩形值并在其上循环以绘制矩形。会少一些代码。

var canvas = document.getElementById("canvas1");
    var ctx = canvas.getContext("2d");


function getRandomColour(){
  var red = Math.floor(Math.random()* 255);
  var green = Math.floor(Math.random() * 255);
  var blue = Math.floor(Math.random() * 255);

  return "rgb("+red+","+green+"," +blue+" )";  
}

ctx.fillStyle = getRandomColour();
ctx.fillRect(70,50,100,100);

ctx.fillStyle = getRandomColour();
ctx.fillRect(10,10,100,100);

<canvas id="canvas1"></canvas>

Answer 2

这是你需要做的：

 var canvas = document.getElementById("canvas1");
    var ctx = canvas.getContext("2d");
    function RandColor() {
      var letters = '0123456789ABCDEF';
      var color = '#';
      for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }
        

        ctx.beginPath();
        ctx.fillStyle = RandColor();
        ctx.fillRect(70,50,100,100);
        ctx.fillStyle = RandColor();
        ctx.fillRect(220, 50,100,100);

<canvas id="canvas1" />

你应该为随机颜色创建函数（而不是创建一个随机颜色）并像这样调用它：

    ctx.fillStyle = RandColor();
    ctx.fillRect(70,50,100,100);

为您要创建的每个矩形

Answer 3

您必须要创建功能以轻松添加对象，如下所示：

＆＃13;

// Add function to pick random rgb values
function getRandomRGB() {
  var r = Math.floor(Math.random() * 255);
  var g = Math.floor(Math.random() * 255);
  var b = Math.floor(Math.random() * 255);
  return "rgb(" + r + "," + g + "," + b + ")";
}

// You may want to add this other function to simplify your code, too
function addFilledRect(arg1, arg2, arg3, arg4) {
  // Inside this function, we're using the ctx variable from outside
  ctx.fillStyle = getRandomRGB();       // Call the function to get a random rgv color
  ctx.fillRect(arg1, arg2, arg3, arg4); // Create the filled rectangle
}

var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");

// Then, you can call the above function multiple times
addFilledRect(70, 50, 100, 100);
addFilledRect(220, 50, 100, 100);
addFilledRect(370, 50, 100, 100);
addFilledRect(520, 50, 100, 100);
addFilledRect(670, 50, 100, 100);
addFilledRect(820, 50, 100, 100);

＆＃13;

<html>
  <canvas id="canvas1" height="768" width="1024" style="border: 1px solid #000000;"></canvas>
</html>

＆＃13;

希望它有所帮助。

在HTML5 Canvas上为每个形状赋予随机颜色

3 个答案: