用js在html Canvas上绘制随机彩色圆圈？答案

【问题标题】：Drawing Random Coloured Circles on html Canvas with js?用js在html Canvas上绘制随机彩色圆圈？
【发布时间】：2016-02-08 11:53:14
【问题描述】：

我刚开始接触 js，需要一点帮助！我得到了这两个函数，要画圆和飞溅的圆圈，我需要创建一个 for 循环 来绘制 10 个随机彩色圆圈和 10 个随机飞溅的圆圈！我该怎么做？谢谢

<canvas id="myCanvas" width="550" height="400"></canvas>
<script>
    var randomColour;
    var randomSize;
    var xPos;
    var yPos;
    var i;
    var j;

    randomColour = '#' + Math.random().toString(16).substring(4); // random colour
    c = document.getElementById("myCanvas");
    ctx = c.getContext("2d");

    function drawFilledCircle(size,xPos,Ypos,colour){    //draw circle
        ctx.beginPath();
        ctx.arc(xPos,yPos,size,0,2*Math.PI);
        ctx.fillStyle = colour;
        ctx.fill();
    }

    function drawSplatter(size,xPos,yPos,colour){       // draw splattered circle
        for(j=0;j<10;j++){
            var splatSize = size / Math.round(Math.random()*30);
            drawFilledCircle(splatSize,xPos + Math.round(Math.random()*50),yPos + Math.round(Math.random()*50),colour);
        }
    }


</script>

【问题讨论】：

请具体说明您想知道的内容。你在看什么？和你想看到的有什么不同？您尝试过哪些解决方案？
您有两个功能，一个用于绘制填充圆，另一个用于绘制飞溅圆。因此，当您需要/喜欢时，请使用正确的参数调用这两个函数。祝你好运
我想知道使用这些函数和随机颜色生成这些随机圆圈的“for 循环”是什么样的，所以当页面刷新时，它会生成 10 个正常和 10 个飞溅的圆圈。我对 js 真的很陌生，:) 谢谢
我有这段代码可以用来生成一个正常的和一个飞溅的圆圈，但是我如何在“for循环”中使用它来生成10个呢？ randomColour = '#' + Math.random().toString(16).substring(2, 8); randomSize = Math.round(Math.random()*50); xPos = Math.round(Math.random()*550); yPos = Math.round(Math.random()*400); drawFilledCircle(randomSize, xPos, yPos, randomColour); drawSplatter(randomSize, xPos, yPos, randomColour);
drawFilledCircle 中的Ypos 需要更改为yPos。此外，随机颜色对我不起作用，因此也需要更改。

标签： javascript loops for-loop

【解决方案1】：

var randomColour;
var randomSize;
var xPos;
var yPos;
var i;
var j;

c = document.getElementById("myCanvas");
ctx = c.getContext("2d");

function drawFilledCircle(size, xPos, yPos, colour) { //draw circle
  ctx.beginPath();
  ctx.arc(xPos, yPos, size, 0, 2 * Math.PI);
  ctx.fillStyle = colour;
  ctx.fill();
}

function drawSplatter(size, xPos, yPos, colour) { // draw splattered circle
  for (j = 0; j < 10; j++) {
    var splatSize = size / Math.round(Math.random() * 30);
    drawFilledCircle(splatSize, xPos + Math.round(Math.random() * 50), yPos + Math.round(Math.random() * 50), colour);
  }
}

var maxSize = 30;
var minSize = 10;
var maxX = c.width;
var maxY = c.height;

function randoms() {
  var size = Math.ceil(Math.random() * maxSize);
  size = Math.max(size, minSize);
  var x = Math.floor(Math.random() * maxX);
  var y = Math.floor(Math.random() * maxY);
  var colour = '#' + Math.random().toString(16).substr(2,6);
  return {size:size, x:x, y:y, colour:colour};
}

for (var i = 0; i < 10; i++) {
  var r = randoms();
  drawFilledCircle(r.size, r.x, r.y, r.colour);
  r = randoms();
  drawSplatter(r.size, r.x, r.y, r.colour);
}

body {
  background-color:#222222;
}

&lt;canvas id="myCanvas" width="550" height="400"&gt;&lt;/canvas&gt;

【讨论】：