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

Drawing Random Coloured Circles on html Canvas with js?

本文关键字：随机 绘制 彩色 js html 使用      更新时间：2023-09-26

我刚刚开始使用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>


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;
}
<canvas id="myCanvas" width="550" height="400"></canvas>

相关文章：