使用js在html画布上绘制随机彩色圆圈？

Question

我刚开始使用js并且需要一些帮助！我有这两个功能，画圆圈和圆圈，我需要创建一个 for loop 来绘制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>

Answer 1

＆＃13;

＆＃13;

-RSAPublicKey_out

＆＃13;

openssl rsa

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;