求助：点击按钮生成带圆形的Canvas并并排显示的实现

我来帮你搞定这个瓶颈！咱们先理清楚核心问题：默认Canvas是块级元素，直接添加会自动换行，所以得先通过布局让它们横向排列；另外把绘制圆形的逻辑封装成复用函数，不管是已有还是新生成的Canvas都能调用。

下面是完整的实现方案，我会分步骤解释：

1. 调整HTML结构与基础布局 #

把所有Canvas放在一个容器里，方便统一控制横向排列，同时添加触发按钮：

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 用flex布局让Canvas横向排列，还能设置间距 */
        .canvas-container {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        /* 给Canvas加边框，方便区分每个实例 */
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="canvas-container">
        <!-- 页面默认存在的两个Canvas -->
        <canvas id="myCanvas1" width="200" height="100"></canvas>
        <canvas id="myCanvas2" width="200" height="100"></canvas>
    </div>
    <button id="addCanvasBtn">添加新Canvas</button>

    <script>
        // JS逻辑放在这里
    </script>
</body>
</html>

2. 封装绘制圆形的复用函数 #

把绘制圆形的逻辑抽出来，接收Canvas元素作为参数，这样不管是已有还是新创建的Canvas，都能调用这个函数完成绘制：

function drawCircleOnCanvas(canvas) {
    const ctx = canvas.getContext('2d');
    // 清空画布（可选，防止重复绘制时出现重叠）
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // 在Canvas中心绘制红色圆形
    ctx.beginPath();
    ctx.arc(canvas.width / 2, canvas.height / 2, 40, 0, Math.PI * 2);
    ctx.fillStyle = '#ff4444';
    ctx.fill();
    ctx.stroke();
}

3. 初始化已有Canvas #

页面加载完成后，给默认的两个Canvas绘制圆形：

const canvasContainer = document.querySelector('.canvas-container');
const addBtn = document.getElementById('addCanvasBtn');

// 给已有Canvas绘制圆形
const existingCanvases = document.querySelectorAll('canvas');
existingCanvases.forEach(canvas => {
    drawCircleOnCanvas(canvas);
});

4. 实现按钮点击添加新Canvas的逻辑 #

每次点击按钮，创建新的Canvas元素，设置统一的宽高，添加到容器后调用绘制函数：

addBtn.addEventListener('click', () => {
    // 创建新Canvas元素
    const newCanvas = document.createElement('canvas');
    // 设置和已有Canvas一致的尺寸
    newCanvas.width = 200;
    newCanvas.height = 100;
    // 把新Canvas添加到容器中
    canvasContainer.appendChild(newCanvas);
    // 给新Canvas绘制圆形
    drawCircleOnCanvas(newCanvas);
});

把以上JS代码整合到页面的<script>标签里，就能实现点击按钮持续在已有Canvas旁边新增带圆形的Canvas了~

内容的提问来源于stack exchange，提问作者Panda R