Canvas 渲染高 DPI 屏幕下的模糊治理与优化

Canvas 渲染高 DPI 屏幕下的模糊治理与优化

在数据可视化和图表绘制中，前端工程师最常收到的视觉 Bug 反馈之一就是：“在 MacBook Retina 屏或 4K 高刷屏上，Canvas 绘制的折线、文字和圆点边缘发虚，宛如被蒙上了一层毛玻璃”。而如果仅仅照本宣科地将 Canvas 尺寸无脑放大 3 倍或 4 倍，又极易引发移动端或低配设备的显存超限（OOM）、掉帧以及坐标系统错位的连锁反应。

治理高 DPI 屏幕下的 Canvas 模糊，不仅是一次像素换算，更是一场兼顾视网膜清晰度与渲染显存平衡的精密控制。

根因剖析：逻辑像素与物理网格的错位

Canvas 本质上是一块由物理点阵构成的位图缓冲区（Bitmap Buffer）。它包含两套完全独立的尺寸属性：

当屏幕设备像素比 window.devicePixelRatio = 2 时，1 个 CSS 逻辑像素实际上由 $2 \\times 2 = 4$ 个物理发光点呈现。如果此时 canvas.width 与 canvas.style.width 均为 500px，浏览器合成器为了填满 1000px 的物理屏幕像素，就会强行对这张 500px 的位图执行双线性插值放大（Bilinear Interpolation），导致清晰的矢量边缘沦为毛糙的渐变模糊。

标准治理模型与坐标系对齐

标准的解决思路是：将位图内在分辨率等比放大至物理像素大小，再通过 CSS 样式将其约束在逻辑尺寸，最后在 2D 绘图上下文中应用缩放变换，使用户代码完全沿用逻辑像素坐标体系编写。

export class HiDPICanvas {
public canvas: HTMLCanvasElement;
public ctx: CanvasRenderingContext2D;
private dpr: number = 1;
private maxDpr: number;

constructor(canvas: HTMLCanvasElement, maxDpr: number = 2) {
this.canvas = canvas;
const context = canvas.getContext('2d');
if (!context) throw new Error('Failed to get 2D context');
this.ctx = context;
this.maxDpr = maxDpr;

this.resize();
this.bindDisplayChangeWatcher();
}

/**
* 尺寸与像素比重置
*/
public resize(customWidth?: number, customHeight?: number): void {
// 钳制 DPR 最大值，防止超高分屏（如 3x/4x）造成显存暴增与性能衰减
this.dpr = Math.min(window.devicePixelRatio || 1, this.maxDpr);

const rect = this.canvas.getBoundingClientRect();
const displayWidth = customWidth ?? rect.width ?? 300;
const displayHeight = customHeight ?? rect.height ?? 150;

// 1. 设置位图内在分辨率
this.canvas.width = Math.round(displayWidth * this.dpr);
this.canvas.height = Math.round(displayHeight * this.dpr);

// 2. 锁定 CSS 逻辑尺寸
this.canvas.style.width = `${displayWidth}px`;
this.canvas.style.height = `${displayHeight}px`;

// 3. 缩放绘图上下文坐标系，使得业务绘制代码保持纯逻辑坐标
this.ctx.resetTransform?.() || this.ctx.setTransform(1, 0, 0, 1, 0, 0);
this.ctx.scale(this.dpr, this.dpr);
}

/**
* 监听跨屏拖拽时的 DPR 动态变化
*/
private bindDisplayChangeWatcher(): void {
const mediaQuery = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
const handleChange = () => {
this.resize();
// 触发外部重绘回调
this.onRedrawNeeded?.();
this.bindDisplayChangeWatcher(); // 重新绑定新的 DPR 监听器
};
mediaQuery.addEventListener('change', handleChange, { once: true });
}

public onRedrawNeeded?: () => void;
}

1 像素物理对齐（Pixel Snapping）与抗锯齿

即使在配置了高 DPR 后，许多工程师在绘制 1 像素的精细网格线时，依然会发现线条发灰变粗（变成了 2 像素宽）。

这是因为 Canvas 的路径居中绘制机制：当你在整数坐标 x = 10 处绘制一条宽度为 1 的竖线时，Canvas 会将线宽均分到两边，即绘制范围为 [9.5, 10.5]。由于落在了两个像素单元之间，抗锯齿引擎会对相邻的两个像素点各填充 50% 的不透明度，导致线条泛白发虚。

对齐方案：对于奇数线宽（1px、3px），在绘制时必须为坐标增加 0.5 像素的物理对齐偏移量（Snapping Offset）：

export function drawCrispLine(
ctx: CanvasRenderingContext2D,
x1: number,
y1: number,
x2: number,
y2: number,
lineWidth: number = 1
): void {
ctx.save();
ctx.lineWidth = lineWidth;
// 奇数线宽进行半像素平移
const offset = (lineWidth % 2 === 1) ? 0.5 : 0;

ctx.beginPath();
ctx.moveTo(Math.floor(x1) + offset, Math.floor(y1) + offset);
ctx.lineTo(Math.floor(x2) + offset, Math.floor(y2) + offset);
ctx.stroke();
ctx.restore();
}

显存风暴防御：DPR 的克制与分层渲染

在 3x DPR 的手机屏幕或 Retina 5K iMac 上，盲目乘以 DPR 会使一块 1920×1080 的全屏 Canvas 瞬间膨胀到 5760×3240 像素，单帧位图显存占用突破 75MB（RGBA 四通道），带来严重的内存警告与渲染发热。

生产环境下的三项防御准则：

用精准的像素映射驾驭光栅，方能使墨色线条在任何分辨率的屏幕上，都如金石刻印般明晰遒劲。