如何修复JS Canvas图形边缘模糊问题

问题说明 #

开发的Canvas应用需具备响应式适配、窗口缩放适配、自定义输出尺寸、图形边缘清晰的特性，目前前三项已实现，但存在图形边缘模糊问题：绘制的矩形顶部/左侧边缘模糊，右侧/底部清晰；Firefox与Chrome浏览器呈现的模糊边缘方向相反。尝试过添加0.5px偏移（无效）、重复绘制3-4次（代码冗余且性能差），需高效修复方案。

修复方案 #

核心问题分析 #

模糊根源在于设备像素比（DPR）缩放时的浮点精度误差，以及Canvas绘制时的亚像素渲染。浏览器会对非整数坐标的图形进行抗锯齿处理，导致边缘模糊；同时当前代码中scale计算与Canvas实际尺寸的匹配逻辑存在偏差。

具体修复步骤 #

• 精准匹配DPR缩放：调整Canvas尺寸与缩放比例，确保实际像素与显示像素1:1对应，消除缩放后的精度损失
• 强制整数坐标绘制：绘制图形时将坐标和尺寸取整，避免亚像素渲染
• 优化CSS渲染属性：给Canvas添加清晰渲染相关属性，强制浏览器以无模糊方式渲染

修改后的完整代码 #

JS代码

var cnv = document.getElementById("canvas")
var ctx = cnv.getContext("2d");
var wrp = document.getElementById("wrp");

// 宽高比、用户自定义输出尺寸
var ar = 0.8
var size = 2000
var width, height;
var scale;

function draw() {
  setup();

  ctx.fillStyle = "#D4CAA3";
  // 背景绘制坐标取整
  ctx.fillRect(0, 0, Math.round(width), Math.round(height));
  ctx.fillStyle = "#A15837";
  // 矩形坐标和尺寸取整
  ctx.fillRect(Math.round(200), Math.round(200), Math.round(200), Math.round(200));
}

function setup() {
  const PR = window.devicePixelRatio || 1;
  let w = innerWidth, h = innerHeight;

  // 计算容器显示尺寸
  width = w < h * ar ? w : h * ar;
  height = w < h * ar ? w / ar : h;

  wrp.style.width = `${width}px`;
  wrp.style.height = `${height}px`;

  // 计算Canvas实际像素尺寸（匹配DPR）
  const canvasWidth = Math.round(size * PR);
  const canvasHeight = Math.round(size / ar * PR);
  cnv.width = canvasWidth;
  cnv.height = canvasHeight;

  // 重置上下文变换矩阵，避免重复缩放累积误差
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  // 计算精准缩放比例
  scale = (size / (w < h * ar ? w : h * ar)) * PR;
  ctx.scale(scale, scale);
}

window.addEventListener("resize", draw, false);
draw();

CSS代码

body {
  overflow: hidden;
  background: #222;
  margin: 0
}

#wrp {
  margin: 0 auto
}

canvas {
  margin: auto;
  width: 100%;
  height: 100%;
  /* 强制清晰渲染，兼容多浏览器 */
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

HTML代码

<div id="wrp">
  <canvas id="canvas"></canvas>
</div>

关键修复点说明 #

• 重置变换矩阵：每次setup时用ctx.setTransform(1,0,0,1,0,0)清除之前的缩放，避免多次resize导致的变换累积误差
• 精准缩放计算：缩放比例乘以DPR，确保Canvas实际像素与显示像素完全匹配
• 整数坐标绘制：所有绘制的坐标和尺寸用Math.round()取整，彻底避免亚像素渲染的抗锯齿模糊
• CSS渲染优化：image-rendering属性强制浏览器以清晰方式渲染Canvas内容，尤其在缩放场景下

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