HTML5 Game - Creating Randomizing Circles

Description

Creating Randomizing Circles
Demo

<!DOCTYPE HTML>
<html>

<head>
    <script>
        //Draws random circles on a canvas.
        window.onload = function() {
            canvas = document.getElementById("canvasArea");
            context = canvas.getContext("2d");

            //PARAMETERS for circles.
            let numCircles = 500;//from w  w w.j a  v a  2  s .  c  om
            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>
HTML5 Game - Creating Randomizing Circles

Description

Demo

Related Topic
