如何提升HTML5 Canvas的渲染分辨率与绘图显示质量？

该问题的核心诱因是*设备像素比（DPR，window.devicePixelRatio）*不匹配：Canvas存在两套尺寸，一套是画布实际的像素尺寸（通过<canvas>标签的width/height属性设置），另一套是页面上的显示尺寸（通过CSS设置）。高DPI屏幕（如视网膜屏）下1个逻辑像素对应多个物理像素，若画布实际尺寸和显示尺寸一致，浏览器会拉伸画布填充物理像素，最终导致渲染模糊。
下面是可落地的优化方案：

1. 自适应匹配设备像素比调整画布参数 #

这是最通用的解决方案，操作步骤如下：

• 获取当前设备的像素比：const dpr = window.devicePixelRatio || 1
• 获取Canvas元素在页面上的实际显示宽高：const { clientWidth, clientHeight } = canvas
• 将Canvas的实际画布尺寸设置为显示尺寸乘以像素比，同时对绘图上下文做缩放处理，后续绘制无需额外计算像素比：

const canvas = document.querySelector('#your-canvas');
const ctx = canvas.getContext('2d');
const dpr = window.devicePixelRatio || 1;
// 调整画布实际像素尺寸
canvas.width = canvas.clientWidth * dpr;
canvas.height = canvas.clientHeight * dpr;
// 缩放坐标系，后续绘制直接按逻辑像素填写坐标即可
ctx.scale(dpr, dpr);

2. 绘制环节的细节优化 #

• 避免使用小数坐标绘制图形，小数坐标会触发抗锯齿计算，导致线条/图形边缘发虚，可用Math.round()对坐标取整后再绘制
• 绘制1px细线时可做0.5像素偏移，比如水平线y坐标设置为目标y值 + 0.5，让线条刚好对齐物理像素网格，避免抗锯齿模糊
• 绘制位图资源时，优先使用尺寸等于「显示尺寸 * 像素比」的高清素材，避免拉伸低分辨率图片

3. 特殊场景适配 #

• 有缩放需求的场景优先使用Canvas矢量路径绘制内容，矢量路径缩放不会出现失真
• 动态绘制/动画场景下，每次重绘前使用ctx.clearRect()清空全画布，避免半透明内容叠加导致画面发雾模糊

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