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

我刚开始学习js，需要一些帮助！我得到了这两个函数，要画圆圈和飞溅的圆圈，我需要为循环创建一个来画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>

颜色；
变量随机大小；
var-xPos；
var-yPos；
var i；
var j；
RandomColor='#'+Math.random（）.toString（16）.子字符串（4）；//随机颜色
c=document.getElementById（“myCanvas”）；
ctx=c.getContext（“2d”）；
函数drawFilledCircle（大小、xPos、YPO、颜色）{//绘制圆
ctx.beginPath（）；
ctx.arc（xPos，yPos，size，0,2*Math.PI）；
ctx.fillStyle=颜色；
ctx.fill（）；
}
函数drawSplatter（大小、xPos、YPO、颜色）{//绘制飞溅圆
对于（j=0；j
var颜色；
变量随机大小；
var-xPos；
var-yPos；
var i；
var j；
c=document.getElementById（“myCanvas”）；
ctx=c.getContext（“2d”）；
函数drawFilledCircle（大小、xPos、YPO、颜色）{//绘制圆
ctx.beginPath（）；
弧（xPos，yPos，size，0，2*Math.PI）；
ctx.fillStyle=颜色；
ctx.fill（）；
}
函数drawSplatter（大小、xPos、YPO、颜色）{//绘制飞溅圆
对于（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），颜色）；
}
}
var maxSize=30；
var minSize=10；
var maxX=c.宽度；
var maxY=c.高度；
函数randoms（）{
var size=Math.ceil（Math.random（）*maxSize）；
大小=数学最大值（大小，最小值）；
var x=Math.floor（Math.random（）*maxX）；
var y=Math.floor（Math.random（）*maxY）；
var color='#'+Math.random（）.toString（16）.substr（2,6）；
返回{size:size，x:x，y:y，color:color}；
}
对于（变量i=0；i<10；i++）{
var r=randoms（）；
绘制填充圆（r.尺寸、r.x、r.y、r.颜色）；
r=随机数（）；
拉丝飞溅（r.尺寸、r.x、r.y、r.颜色）；
}
正文{
背景色：#22222；
}
请具体说明您想要知道的内容。您看到了什么？它与您想要看到的有什么不同？您尝试了什么解决方案？您有两个函数，一个用于绘制填充圆，另一个用于绘制飞溅圆。因此，当您需要/喜欢时，使用正确的参数调用这两个函数。好的luckI想知道t“for循环”看起来像是使用这些函数和随机颜色生成那些随机圆圈，因此当页面刷新时，它会生成10个正常圆圈和10个飞溅圆圈。我对js非常陌生：）谢谢，我有这段代码，可以用来生成一个正常圆圈和一个飞溅圆圈，但是如何在“for循环”中使用它要分别生成10个？RandomColor='#'+Math.random（）.toString（16）.子字符串（2,8）；randomSize=Math.round（Math.random（）*50）；xPos=Math.round（Math.random（）*550）；yPos=Math.round（Math.random（）*400）；DrawFilled圆（randomSize，xPos，yPos，RandomColor）；drawSplatter（randomSize，xPos，yPos，RandomColor）；需要将
drawFilledCircle
中的
Ypos
更改为
Ypos
。而且随机颜色对我不起作用，因此也需要更改。