解决JavaScript Canvas绘制表格、文字与图形时的模糊问题

在Web开发中，使用Canvas API绘制表格、文字或图形时，开发者常遇到文字边缘发虚、线条锯齿明显、整体画面模糊等问题。这些现象尤其在高清屏（如Retina屏）或缩放场景下更为突出。本文将从底层原理出发，结合实际案例，系统性解析问题成因，并提供可落地的解决方案。

一、模糊问题的核心成因

1. 设备像素比（Device Pixel Ratio）未适配

Canvas的逻辑像素与物理像素的映射关系是模糊问题的根源。默认情况下，1个CSS像素对应1个物理像素，但在高清屏（如DPR=2）中，1个CSS像素实际覆盖4个物理像素（2×2）。若未调整Canvas的宽高属性，绘制内容会被强制拉伸，导致边缘模糊。

示例：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 错误：未考虑DPR，导致模糊
canvas.width = 300;  // 逻辑像素
canvas.height = 150;
// 正确：根据DPR动态调整
const dpr = window.devicePixelRatio || 1;
canvas.width = 300 * dpr;  // 物理像素
canvas.height = 150 * dpr;
ctx.scale(dpr, dpr);  // 缩放坐标系

2. 抗锯齿算法的副作用

Canvas默认启用抗锯齿（Antialiasing），通过混合像素颜色平滑边缘。但在绘制1px细线或小号文字时，抗锯齿会引入半透明像素，导致视觉模糊。

解决方案：

• 线条绘制：使用lineWidth=1时，通过translate(0.5, 0.5)将坐标偏移0.5像素，使线条对齐物理像素中心。
• 文字绘制：关闭抗锯齿（部分浏览器支持imageSmoothingEnabled=false），或使用textBaseline="top"避免底部留白。

3. 坐标整数化缺失

Canvas的坐标系统允许浮点数，但物理像素是离散的。若绘制位置为(10.3, 20.7)，浏览器会插值计算，导致边缘模糊。

优化实践：

// 错误：浮点坐标导致模糊
ctx.fillRect(10.3, 20.7, 50, 30);
// 正确：强制整数坐标
function roundRect(x, y, w, h) {
  ctx.fillRect(Math.round(x), Math.round(y), Math.round(w), Math.round(h));
}

4. 字体与尺寸不匹配

文字模糊的常见原因是字体大小与Canvas分辨率不协调。例如，在DPR=2的屏幕上，若字体大小为12px（逻辑像素），实际渲染为24px（物理像素），但字体家族可能未提供对应的高清版本。

建议：

• 使用rem或em单位动态调整字体大小。
• 优先选择系统高清字体（如-apple-system、Segoe UI）。
• 通过ctx.font直接设置物理像素大小：

  const baseSize = 16;  // 逻辑像素
  ctx.font = `${baseSize * dpr}px Arial`;

二、表格绘制的特殊挑战

表格绘制涉及线条对齐和文字居中，模糊问题更为复杂。例如，单元格边框可能因坐标非整数而发虚，文字可能因未对齐像素网格而模糊。

1. 精确边框绘制

问题：

// 绘制1px边框时模糊
ctx.strokeRect(0, 0, 100, 50);

解决方案：

• 使用lineWidth=1时，将坐标偏移0.5像素：

  ctx.translate(0.5, 0.5);
  ctx.strokeRect(0, 0, 100, 50);

• 或通过fillRect模拟边框：

  // 上边框
  ctx.fillRect(0, 0, 100, 0.5);
  // 左边框
  ctx.fillRect(0, 0, 0.5, 50);

2. 文字垂直居中优化

问题：

ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('Hello', 50, 25);  // 50x50单元格的中心

在高清屏下，文字可能因抗锯齿而发虚。

优化方案：

• 关闭抗锯齿（若浏览器支持）：

  ctx.imageSmoothingEnabled = false;

• 或微调垂直位置：

  // 根据DPR调整偏移量
  const offset = dpr === 1 ? 0 : 0.2;
  ctx.fillText('Hello', 50, 25 + offset);

三、图形绘制的模糊场景

1. 旋转与缩放变形

对图形进行旋转或缩放时，若未考虑像素对齐，会导致边缘模糊。例如：

// 旋转后模糊
ctx.save();
ctx.translate(50, 50);
ctx.rotate(Math.PI / 4);
ctx.fillRect(0, 0, 30, 10);  // 矩形旋转后边缘模糊
ctx.restore();

解决方案：

• 在旋转前将坐标偏移0.5像素：

  ctx.translate(50.5, 50.5);  // 关键：整数坐标+0.5偏移

• 或扩大绘制区域，通过裁剪保证清晰度。

2. 渐变与阴影的副作用

渐变和阴影会引入半透明像素，在缩放时可能加剧模糊。建议：

• 避免在小尺寸图形上使用复杂渐变。
• 阴影模糊值（blur）控制在2px以内。

四、综合优化方案

1. 动态适配DPR

封装Canvas初始化函数，自动适配设备像素比：

function initCanvas(canvasId) {
  const canvas = document.getElementById(canvasId);
  const ctx = canvas.getContext('2d');
  const dpr = window.devicePixelRatio || 1;
  // 设置物理像素尺寸
  const rect = canvas.getBoundingClientRect();
  canvas.width = rect.width * dpr;
  canvas.height = rect.height * dpr;
  // 缩放坐标系
  ctx.scale(dpr, dpr);
  return { canvas, ctx };
}

2. 工具函数：清晰绘制表格

function drawSharpTable(ctx, rows, cols, cellWidth, cellHeight) {
  const dpr = window.devicePixelRatio || 1;
  const offset = 0.5 / dpr;  // 根据DPR调整偏移量
  ctx.strokeStyle = '#000';
  ctx.lineWidth = 1 / dpr;  // 物理像素宽度
  for (let i = 0; i <= rows; i++) {
    const y = i * cellHeight + offset;
    ctx.beginPath();
    ctx.moveTo(offset, y);
    ctx.lineTo(cols * cellWidth + offset, y);
    ctx.stroke();
  }
  for (let j = 0; j <= cols; j++) {
    const x = j * cellWidth + offset;
    ctx.beginPath();
    ctx.moveTo(x, offset);
    ctx.lineTo(x, rows * cellHeight + offset);
    ctx.stroke();
  }
}

3. 文字清晰度检查清单

• 确认ctx.font大小与DPR匹配。
• 避免textBaseline="alphabetic"，优先使用"top"或"middle"。
• 在高清屏下，微调文字Y坐标（如+0.2）。

五、总结与最佳实践

1. 始终适配DPR：初始化Canvas时动态调整宽高和缩放比例。
2. 坐标整数化：绘制前对坐标进行Math.round或+0.5偏移。
3. 控制抗锯齿：对细线和小文字关闭抗锯齿或微调位置。
4. 测试多设备：在DPR=1、1.5、2的屏幕上验证效果。

通过以上方法，可显著提升Canvas在绘制表格、文字和图形时的清晰度，尤其适用于数据可视化、图表库等对精度要求高的场景。