如何使用 html5 和 CSS 连接多个矩形？

Question

我使用 Canvas 创建了多个矩形，每个矩形都有唯一的 id

<table class="trpnl" id="tblPanel" style="width:300%;" cellpadding="0" cellspacing="0">
<tr style="height:40px;"></tr>
@for(var i=1;i<=15;i++)
{
  <tr>
  <td style="width:20px;"></td>
  <td>                                  
  <canvas id="newCanvas_@i" width="200" height="8" style="border:1px solid #000000;"></canvas>                                               
  </td>
  </tr>
} 
</table>

这是画布的 JavaScript 代码

 for(var i=1;i<=15;i++)
  {
    var c = document.getElementById('newCanvas'+"_"+i)
    var ctx = c.getContext('2d');
    ctx.fillStyle = '#708090';
    ctx.fillRect(0, 0, 200, 10);
  }

我得到这样的输出

我想显示这样的输出

我尝试在表格中设置 cellpadding="0" cellspacing="0" 但没有任何效果 任何人都可以给我一个想法如何合并或连接这些矩形，如预期的输出。 短暂性脑缺血发作。

Answer 1

您可以在同一个循环中执行这两个“操作”。

const panel = document.querySelector('.panel'),
      rows = document.createDocumentFragment();

for (let i=1; i<=15; i++) {
  const c = document.createElement('CANVAS');
  c.width = 200; // Set canvas width
  c.height = 10; // Set canvas height
  const ctx = c.getContext('2d');
  ctx.fillStyle = '#708090';
  ctx.fillRect(0, 0, c.width, c.height); // Fill entire canvas with color
  rows.appendChild(c);
}

panel.appendChild(rows);

.panel {
  display: flex;
  flex-direction: column;
  width: 200px;
}
.panel canvas {
  border: 1px solid #000000;
}

<div class="panel"></div>