一、Canvas模糊问题的核心成因

1.1 设备像素比（DPR）适配缺失

现代显示设备普遍采用高DPI屏幕（如Retina屏），当Canvas的逻辑像素尺寸与物理像素不匹配时，浏览器会进行插值缩放导致模糊。例如在2倍DPR设备上，未做适配的200x200 Canvas实际只占用100x100物理像素。

解决方案：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const dpr = window.devicePixelRatio || 1;
// 设置Canvas物理尺寸
canvas.style.width = '200px';
canvas.style.height = '200px';
canvas.width = 200 * dpr;
canvas.height = 200 * dpr;
// 缩放渲染上下文
ctx.scale(dpr, dpr);

1.2 渲染上下文配置不当

未正确设置imageSmoothingEnabled属性会影响图片缩放质量，而textBaseline等文字基线设置不当会导致文字边缘虚化。

优化配置：

// 图片处理配置
ctx.imageSmoothingEnabled = true;  // 启用平滑缩放
ctx.imageSmoothingQuality = 'high'; // 现代浏览器支持
// 文字渲染配置
ctx.font = 'bold 16px Arial';
ctx.textBaseline = 'middle'; // 替代默认的alphabetic

二、图片模糊专项解决方案

2.1 图片加载与绘制策略

直接绘制未缩放的原始图片会导致模糊，需根据Canvas实际尺寸进行适配：

function drawScaledImage(ctx, imgUrl, targetWidth, targetHeight) {
  const img = new Image();
  img.onload = function() {
    const dpr = window.devicePixelRatio;
    const scaleX = targetWidth * dpr / img.width;
    const scaleY = targetHeight * dpr / img.height;
    ctx.save();
    ctx.scale(dpr, dpr);
    ctx.drawImage(img, 0, 0, targetWidth, targetHeight);
    ctx.restore();
  };
  img.src = imgUrl;
}

2.2 离屏Canvas技术

对需要重复使用的图片，采用离屏Canvas预渲染：

function createImageBuffer(img, width, height) {
  const buffer = document.createElement('canvas');
  const dpr = window.devicePixelRatio;
  buffer.width = width * dpr;
  buffer.height = height * dpr;
  const ctx = buffer.getContext('2d');
  ctx.scale(dpr, dpr);
  ctx.drawImage(img, 0, 0, width, height);
  return buffer;
}

三、文字渲染优化方案

3.1 字体渲染配置

通过textRendering属性优化文字清晰度：

ctx.textRendering = 'optimizeLegibility'; // 优先清晰度
// 或
ctx.textRendering = 'geometricPrecision'; // 几何精度模式

3.2 亚像素渲染技术

利用CSS transform实现亚像素级定位：

.canvas-container {
  transform: translateZ(0); /* 启用硬件加速 */
  will-change: transform;
}

3.3 文字描边增强

通过双重描边提升边缘清晰度：

function drawSharpText(ctx, text, x, y) {
  const dpr = window.devicePixelRatio;
  ctx.font = 'bold 16px Arial';
  // 双重描边
  ctx.strokeStyle = '#000';
  ctx.lineWidth = 1/dpr;
  ctx.strokeText(text, x, y);
  ctx.fillStyle = '#fff';
  ctx.fillText(text, x, y);
}

四、高级优化技术

4.1 WebGL混合渲染

对性能要求高的场景，可采用WebGL渲染文字和图片：

// 示例：使用Three.js渲染文字
const textGeometry = new THREE.TextGeometry('Hello', {
  size: 0.5,
  height: 0.1,
  font: 'helvetiker'
});
const textMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
const textMesh = new THREE.Mesh(textGeometry, textMaterial);
scene.add(textMesh);

4.2 动态分辨率调整

根据设备性能动态调整渲染质量：

function adjustQuality() {
  const dpr = window.devicePixelRatio;
  const isLowPerf = /* 性能检测逻辑 */;
  if (isLowPerf && dpr > 1) {
    // 降级处理
    canvas.width = 200;
    canvas.height = 200;
    ctx.scale(1, 1);
  } else {
    // 高清处理
    canvas.width = 200 * dpr;
    canvas.height = 200 * dpr;
    ctx.scale(dpr, dpr);
  }
}

五、实践建议与注意事项

1. 性能监控：使用window.performance API监控渲染耗时
2. 渐进增强：基础功能保证所有设备可用，高清效果作为增强层
3. 测试矩阵：建立包含不同DPR（1/1.5/2/3）、不同OS（Win/Mac/iOS/Android）的测试环境
4. 降级策略：当检测到内存不足时，自动降低渲染质量

六、典型问题排查流程

1. 检查canvas.width/height与CSS尺寸的比例关系
2. 验证devicePixelRatio是否正确应用
3. 检查图片原始尺寸与目标尺寸的比例
4. 确认文字基线（baseline）设置是否合理
5. 使用ctx.getImageData()检查实际渲染像素

通过系统性地应用上述技术方案，开发者可以有效解决Canvas应用中的图像和文字模糊问题。实际开发中建议采用模块化设计，将高清渲染功能封装为独立组件，便于在不同项目中复用。随着浏览器技术的演进，建议持续关注imageSmoothingQuality等新特性的支持情况，及时更新渲染策略。