同一页面上具有随机图形的多个 html 画布元素

Question

尝试在单个 html 页面上创建多个 canvas 元素，然后在每个页面上绘制不同的图形。但问题是，所有这些都绘制了相同的图形，没有任何随机化

    canvas_container_div = document.getElementById('canvas_container_div');

    let animation_frame_id;

    let canvas_array = [];
    let context_array = [];
    let number_of_canvas = 5;

    //creating canvas and storing it in an array
    for(var i = 0;i < number_of_canvas ; i++){

    var canvas1 = document.createElement('canvas');
    canvas1.style.width = '200px';
    canvas1.style.height = '200px';
    canvas1.style.margin = '10px';
    canvas1.style.border = '1px solid white';
    canvas_array.push(canvas1);
    
    }

    //displaying all canvas inside the div element
    for(var i = 0;i < canvas_array.length ; i++){
        canvas_container_div.appendChild(canvas_array[i]);  
    }

    //getting all the contex for all the canvas
    for(var i = 0;i < canvas_array.length ; i++){
        context_array.push(canvas_array[i].getContext('2d'));
    }

    //random values generating
    let hue = Math.random()*360;
    //or other radom parameters

    //updating each graphics
    function update(ctx){
      ctx.fillStyle = 'hsl('+hue+',100%,50%)';
    }


    function render(){

        //getting all the context   
        for(var i = 0;i < context_array.length ; i++){

            //clearing bg for perticular canvas
            context_array[i].clearRect(0,0,canvas_array[i].width,canvas_array[i].height);

            //passing perticular canvas context to update method
            update(context_array[i]);
            
            //drawing with pertucular context
            context_array[i].beginPath();
            context_array[i].arc(canvas_array[i].width/2,canvas_array[i].height/2,40,0,Math.PI *2);
            context_array[i].closePath();
            context_array[i].fill();

        }

        animation_frame_id = requestAnimationFrame(render);
    }


    render();

希望在不同画布上绘制的所有圆圈都具有不同的颜色，但所有圆圈的颜色都相同。不能随机化

Answer 1

您在渲染循环之外定义色调，因此每次运行循环并调用色调时，填充样式都会获得相同的颜色。您可以创建一个函数，在 for 循环中随机化色调，以创建与画布数组长度相同的颜色数组。

然后在你的for循环内对数组及其索引调用render函数，以使每个单独的圆具有不同的颜色填充样式。

注意：这只会随机化颜色，它不会检查颜色是否已经存在，因此您可能需要额外的代码来检查数字是否存在在将值推入数组之前已经在数组中。 此外，您会注意到一些色调在一定数量内随机化，彼此足够接近，以至于它们实际上看起来是相同的，您还可以在 setHue() 函数中包含代码，用于检查数字是否在彼此之间的特定限制内，这可能是 .include() 甚至是检查色调数组和当前数组之间差异的条件循环内的值。

let hue = [];
function setHue() {
  for (let h = 0; h < context_array.length; h++) {
    hue.push(Math.trunc(Math.random() * 360));
  }
}
setHue();

canvas_container_div = document.getElementById('canvas_container_div');

let animation_frame_id;

let canvas_array = [];
let context_array = [];
let number_of_canvas = 5;

//creating canvas and storing it in an array
for (var i = 0; i < number_of_canvas; i++) {

  var canvas1 = document.createElement('canvas');
  canvas1.style.width = '200px';
  canvas1.style.height = '200px';
  canvas1.style.margin = '10px';
  canvas1.style.border = '1px solid white';
  canvas_array.push(canvas1);

}

//displaying all canvas inside the div element
for (var i = 0; i < canvas_array.length; i++) {
  canvas_container_div.appendChild(canvas_array[i]);
}

//getting all the contex for all the canvas
for (var i = 0; i < canvas_array.length; i++) {
  context_array.push(canvas_array[i].getContext('2d'));
}

//Randomize your hue value and make an array to hold the value
//Then in your for loop within the render function call on the 
//array and its index to make each individual circle a different color fill style
let hue = [];

function setHue() {
  for (let h = 0; h < context_array.length; h++) {
    let color = Math.trunc(Math.random() * 360);

    hue.push(color);

  }
  console.log(hue);
}
setHue();

function render() {

  //getting all the context   
  for (var i = 0; i < context_array.length; i++) {

    //clearing bg for perticular canvas
    context_array[i].clearRect(0, 0, canvas_array[i].width, canvas_array[i].height);


    //drawing with particular context
    context_array[i].beginPath();
    context_array[i].arc(canvas_array[i].width / 2, canvas_array[i].height / 2, 40, 0, Math.PI * 2);
    context_array[i].closePath();
    context_array[i].fill();
    context_array[i].fillStyle = 'hsl(' + hue[i] + ',100%,50%)';

  }

  animation_frame_id = requestAnimationFrame(render);
}


render();

<div id="canvas_container_div"></div>