如何将微件放入选项卡中以控制选项卡中的绘图

<div class="tab-container">
  <ul class="tab-labels">
    <li class="tab-label">选项卡1</li>
    <li class="tab-label">选项卡2</li>
    <li class="tab-label">选项卡3</li>
  </ul>
  <div class="canvas-container">
    <canvas id="myCanvas"></canvas>
  </div>
</div>

.tab-container {
  width: 500px;
  height: 300px;
}

.tab-labels {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.tab-label {
  display: inline-block;
  padding: 10px;
  background-color: #ccc;
  cursor: pointer;
}

.canvas-container {
  width: 100%;
  height: calc(100% - 40px);
  border: 1px solid #ccc;
}

// 获取选项卡标签和绘图区域
const tabLabels = document.querySelectorAll('.tab-label');
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 绘制图形函数
function drawShape(shape) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // 根据shape参数绘制相应的图形
  // 示例：绘制一个矩形
  ctx.fillStyle = 'red';
  ctx.fillRect(50, 50, 100, 100);
}

// 为每个选项卡标签添加点击事件监听器
tabLabels.forEach((label, index) => {
  label.addEventListener('click', () => {
    // 切换选项卡样式
    tabLabels.forEach((label) => {
      label.classList.remove('active');
    });
    label.classList.add('active');

    // 根据选项卡标签的索引绘制相应的图形
    drawShape(index);
  });
});