HTML Canvas Circle random circles

Description

HTML Canvas Circle random circles

View in separate window 


<!DOCTYPE HTML>
<html>
<head>
<script>
  window.onload = function() {//  w w  w.  j  av  a  2 s. c  o  m

    canvas = document.getElementById("canvasArea");
    context = canvas.getContext("2d");

    let numCircles = 500;
    let maxRadius = 20;
    let minRadius = 3;
    let colors = [ "aqua", "black", "blue", "fuchsia", "green", "cyan",
        "lime", "maroon", "navy", "olive", "purple", "red", "silver",
        "teal", "yellow", "azure", "gold", "bisque", "pink", "orange" ];
    let numColors = colors.length;

    // CREATE circles.
    for (let n = 0; n < numCircles; n++) {
      // RANDOM values for circle characteristics.
      let xPos = Math.random() * canvas.width;
      let yPos = Math.random() * canvas.height;
      let radius = minRadius + (Math.random() * (maxRadius - minRadius));
      let colorIndex = Math.random() * (numColors - 1);
      colorIndex = Math.round(colorIndex);
      let color = colors[colorIndex];

      // DRAW circle.
      drawCircle(context, xPos, yPos, radius, color);
    }
  };
  // CIRCLE drawing function.
  function drawCircle(context, xPos, yPos, radius, color) {
    //PARAMETERS for shadow and angles.
    let startAngle = (Math.PI / 180) * 0;
    let endAngle = (Math.PI / 180) * 360;
    context.shadowColor = "gray";
    context.shadowOffsetX = 1;
    context.shadowOffsetY = 1;
    context.shadowBlur = 5;

    //DRAW CIRCLE
    context.beginPath();
    context.arc(xPos, yPos, radius, startAngle, endAngle, false);
    context.fillStyle = color;
    context.fill();
  }
</script>
</head>
<body>
  <div style="width: 500px; height: 150px; margin: 0 auto; padding: 5px;">
    <canvas id="canvasArea" width="500" height="150"
      style="border: 2px solid black">
Your browser doesn't currently support HTML5 Canvas.
</canvas>
  </div>
</body>
</html>



PreviousNext

Related