如何使用HTML5和CSS合并多个Canvas绘制的矩形？

问题根源 #

你当前的分散效果来自三个核心问题：

• 表格行（<tr>）和单元格（<td>）默认存在行高、内边距，导致Canvas之间产生空隙
• 每个Canvas都设置了独立边框，相邻Canvas的边框叠加形成双重线条
• Canvas元素的height属性（8px）与绘制的矩形高度（10px）不匹配，导致对齐偏差

方案1：修复现有表格+多Canvas布局 #

直接调整现有代码的样式和绘制逻辑，让Canvas无缝衔接：

修改后的HTML代码

<table class="trpnl" id="tblPanel" style="width:300%; cellpadding:0; cellspacing:0; border-collapse:collapse; border:1px solid #000;">
  <tr style="height:40px;"></tr>
  @for(var i=1;i<=15;i++)
  {
    <tr style="line-height:0; margin:0; padding:0;">
      <td style="width:20px; padding:0; margin:0;"></td>
      <td style="padding:0; margin:0;">                                  
        <canvas id="newCanvas_@i" width="200" height="10" style="display:block; padding:0; margin:0;"></canvas>                                               
      </td>
    </tr>
  } 
</table>

关键调整点：

• 给表格添加border-collapse:collapse，确保边框合并
• 把表格的整体边框统一设置，移除每个Canvas的独立边框
• 给<tr>和<td>设置line-height:0、padding:0、margin:0，消除行内空隙
• 把Canvas的height改为10px，和后续绘制的矩形高度匹配
• 给Canvas添加display:block，避免默认 inline 元素带来的间距

修改后的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); // 高度和Canvas元素height保持一致
}

方案2：使用单个Canvas绘制（更简洁高效） #

如果不需要表格的结构，直接用一个大Canvas绘制所有连续矩形，代码更简洁，也不会有布局空隙问题：

HTML代码

<canvas id="mainCanvas" width="220" height="150" style="border:1px solid #000;"></canvas>
<!-- 宽度=20px留白+200px矩形宽度；高度=40px顶部留白+15个*10px矩形高度 -->

JavaScript代码

var c = document.getElementById('mainCanvas');
var ctx = c.getContext('2d');
ctx.fillStyle = '#708090';

// 顶部留白40px
var startY = 40;
// 每个矩形高度10px
var rectHeight = 10;
// 左侧留白20px
var startX = 20;

for(var i=0;i<15;i++){
  ctx.fillRect(startX, startY + (i * rectHeight), 200, rectHeight);
}

这个方案不需要依赖表格布局，直接通过Canvas API控制每个矩形的位置，完美实现连续效果。

内容的提问来源于stack exchange，提问作者Swetha Devarapalli