HTML5 Canvas圆形模糊问题求助：移动端适配与单侧圆角实现

这个问题我在做移动端Canvas开发时碰到过好多次，核心原因其实是Retina屏幕的高像素密度适配缺失——iPhone的屏幕设备像素比（devicePixelRatio）通常是2或3，但Canvas默认是按CSS像素来渲染的，相当于把低分辨率的图形强行拉伸到高分辨率屏幕上，圆形这类依赖平滑曲线的图形就会立刻暴露模糊问题，而线条因为宽度或绘制逻辑的原因，可能没那么明显。

下面是我亲测有效的解决步骤：

1. 适配Retina屏幕的Canvas分辨率 #

这是最关键的一步，要让Canvas的实际像素尺寸和屏幕的物理像素匹配：

• 先获取当前设备的像素比window.devicePixelRatio
• 将Canvas的width和height属性（这是Canvas的实际像素尺寸）设置为它的CSS显示尺寸乘以像素比
• 用CSS保持Canvas的显示尺寸不变，同时缩放绘图上下文，这样你后续的绘制代码不用手动换算像素

代码示例：

const canvas = document.getElementById('your-canvas-element');
const ctx = canvas.getContext('2d');
const dpr = window.devicePixelRatio || 1;

// 获取Canvas在页面上的实际显示尺寸
const displayRect = canvas.getBoundingClientRect();
// 设置Canvas的实际像素分辨率
canvas.width = displayRect.width * dpr;
canvas.height = displayRect.height * dpr;
// 缩放绘图上下文，确保绘制的坐标和CSS像素一致
ctx.scale(dpr, dpr);

2. 确保圆形绘制的坐标对齐 #

圆形的模糊有时候也来自半像素偏移——Canvas的绘制坐标是基于像素中心的，如果你的圆心坐标是整数，在Retina屏幕下可能会被渲染在两个物理像素之间，导致边缘模糊。不过只要做了上面的scale处理，你直接用原来的CSS像素坐标绘制就可以，scale会帮你把坐标转换成对齐物理像素的整数。

比如原来的圆形绘制代码：

// 假设这是你用来做单侧圆角的圆形
ctx.beginPath();
ctx.arc(lineEndX, lineEndY, lineWidth / 2, 0, Math.PI * 2);
ctx.fillStyle = '#your-color';
ctx.fill();

在适配分辨率后，这段代码不需要修改，就能在iPhone上清晰显示。

3. 可选：关闭图像平滑（谨慎使用） #

如果做完上面两步还是有轻微模糊，可以尝试关闭Canvas的图像平滑，避免浏览器自动添加抗锯齿导致的模糊感：

ctx.imageSmoothingEnabled = false;
// 针对iOS Safari的前缀兼容
ctx.webkitImageSmoothingEnabled = false;

注意：关闭平滑可能会让线条边缘出现锯齿，所以优先保证分辨率适配，这个选项作为最后优化手段。

为什么线条没问题而圆形模糊？其实是因为线条的宽度在Retina下会被渲染成多倍物理像素，刚好能对齐像素网格；而圆形是连续曲线，对像素精度要求更高，一旦分辨率不匹配，边缘的抗锯齿效果就会变成模糊感。

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