一、Canvas基础与表格绘制原理

Canvas是HTML5提供的2D绘图API，通过JavaScript脚本可实现动态图形渲染。与DOM表格不同，Canvas表格本质是像素级绘制，需手动计算每个单元格的位置、尺寸及边框。这种方式的优点在于性能高效（尤其适合大数据量场景），缺点是缺乏内置交互支持，需自行实现点击、选中等功能。

1.1 创建Canvas画布

首先需在HTML中定义Canvas元素：

<canvas id="tableCanvas" width="800" height="600"></canvas>

通过JavaScript获取上下文：

const canvas = document.getElementById('tableCanvas');
const ctx = canvas.getContext('2d');

1.2 表格坐标系设计

表格绘制需建立数学模型：

• 定义单元格宽度cellWidth和高度cellHeight
• 计算表格总列数cols和行数rows
• 确定表格起始坐标(startX, startY)

示例参数：

const config = {
  cellWidth: 120,
  cellHeight: 40,
  cols: 5,
  rows: 8,
  startX: 50,
  startY: 50
};

二、表格结构绘制实现

2.1 绘制网格线

使用beginPath()和moveTo()/lineTo()方法：

function drawGrid() {
  ctx.strokeStyle = '#333';
  ctx.lineWidth = 1;
  // 绘制垂直线
  for (let i = 0; i <= config.cols; i++) {
    const x = config.startX + i * config.cellWidth;
    ctx.beginPath();
    ctx.moveTo(x, config.startY);
    ctx.lineTo(x, config.startY + config.rows * config.cellHeight);
    ctx.stroke();
  }
  // 绘制水平线（同理）
  // ...
}

2.2 优化绘制性能

对于大型表格（如100x100），建议：

1. 使用requestAnimationFrame分帧绘制
2. 采用离屏Canvas缓存静态部分
3. 仅重绘变化区域（通过计算脏矩形）

三、数据填充与样式定制

3.1 数据模型设计

推荐使用二维数组存储数据：

const tableData = [
  ['ID', '姓名', '年龄', '部门', '薪资'],
  [1, '张三', 28, '技术部', 15000],
  // ...更多行
];

3.2 单元格文本渲染

核心方法：

function fillCellText(row, col, text) {
  const x = config.startX + col * config.cellWidth + 10; // 10px内边距
  const y = config.startY + row * config.cellHeight + 25; // 垂直居中
  ctx.font = '14px Arial';
  ctx.fillStyle = '#333';
  ctx.textAlign = 'left';
  ctx.fillText(text, x, y);
}

3.3 样式增强技巧

• 交替行色：通过row % 2 === 0 ? '#f9f9f9' : '#fff'实现斑马纹
• 悬停效果：监听mousemove事件，重绘高亮行
• 边框圆角：使用arc()绘制单元格四角

四、动态交互实现

4.1 点击事件处理

需实现坐标到单元格的转换：

canvas.addEventListener('click', (e) => {
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  const col = Math.floor((x - config.startX) / config.cellWidth);
  const row = Math.floor((y - config.startY) / config.cellHeight);
  if (col >= 0 && col < config.cols && row >= 0 && row < config.rows) {
    console.log(`点击了第${row}行,第${col}列`);
    // 触发重绘逻辑
  }
});

4.2 数据动态更新

实现数据更新流程：

1. 修改tableData数组
2. 清除画布：ctx.clearRect(0, 0, canvas.width, canvas.height)
3. 重新调用绘制函数

五、完整实现示例

class CanvasTable {
  constructor(canvasId, data, config) {
    this.canvas = document.getElementById(canvasId);
    this.ctx = this.canvas.getContext('2d');
    this.data = data;
    this.config = {
      cellWidth: 120,
      cellHeight: 40,
      startX: 50,
      startY: 50,
      ...config
    };
    this.init();
  }
  init() {
    this.draw();
    this.bindEvents();
  }
  draw() {
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    this.drawGrid();
    this.fillData();
  }
  drawGrid() {
    // 实现同2.1节
  }
  fillData() {
    this.data.forEach((rowData, rowIndex) => {
      rowData.forEach((cellData, colIndex) => {
        this.fillCellText(rowIndex, colIndex, cellData);
      });
    });
  }
  // 其他方法...
}
// 使用示例
const sampleData = [
  ['ID', '产品', '库存', '价格'],
  [1, '笔记本电脑', 120, 5999],
  [2, '智能手机', 300, 2999]
];
new CanvasTable('tableCanvas', sampleData, {
  cols: 4,
  rows: 3
});

六、性能优化建议

1. 虚拟滚动：仅绘制可视区域内的单元格
2. Web Workers：将数据计算移至后台线程
3. Canvas分层：将静态边框和动态内容分开绘制
4. 防抖处理：对高频事件（如滚动）进行节流

七、进阶功能扩展

1. Excel式编辑：双击单元格进入编辑模式
2. 排序功能：点击表头实现数据排序
3. 导出图片：使用canvas.toDataURL()生成PNG
4. 响应式设计：监听窗口变化调整表格尺寸

通过以上方法，开发者可以构建出功能完善、性能优异的Canvas表格系统。实际开发中，建议先实现基础功能，再逐步添加高级特性。对于复杂需求，可考虑结合第三方库（如Fabric.js）简化开发流程。