如何生成3个圆，其中3个圆属于不同的类

生成3个圆，其中3个圆属于不同的类，可以通过以下步骤实现：

引入前端开发工具和库：使用HTML、CSS和JavaScript进行前端开发。可以使用任何前端开发工具，如Visual Studio Code、Sublime Text等。同时，可以使用任何前端库或框架，如React、Angular、Vue等。
创建HTML页面结构：在HTML文件中创建一个容器，用于显示生成的圆。

<!DOCTYPE html>
<html>
<head>
    <title>生成3个圆</title>
    <style>
        .circle {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: red;
            margin: 10px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div id="container"></div>
</body>
</html>

使用JavaScript生成圆：在JavaScript文件中使用Canvas API或SVG来生成圆。以下是使用Canvas API生成圆的示例代码：

window.onload = function() {
    var container = document.getElementById("container");
    
    // 创建Canvas元素
    var canvas = document.createElement("canvas");
    canvas.width = 320;
    canvas.height = 320;
    container.appendChild(canvas);
    
    // 获取Canvas上下文
    var ctx = canvas.getContext("2d");
    
    // 生成3个圆
    for (var i = 0; i < 3; i++) {
        var x = Math.random() * canvas.width;
        var y = Math.random() * canvas.height;
        var radius = Math.random() * 50 + 50;
        
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, 2 * Math.PI);
        ctx.fillStyle = getRandomColor();
        ctx.fill();
        ctx.closePath();
    }
};

// 生成随机颜色
function getRandomColor() {
    var letters = "0123456789ABCDEF";
    var color = "#";
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}