用Canvas绘制音频播放器时间轴：圆形端点抗锯齿线条异常问题

我之前做Canvas可视化时也碰到过一模一样的问题，Mac Chrome对粗线条的渲染确实偶尔会抽风，给你几个亲测有效的解决办法：

1. 修复Canvas的像素缩放匹配问题 #

这是最常见的根源——如果Canvas的实际像素尺寸和CSS显示尺寸不匹配，尤其是在Retina屏幕上，渲染出来的线条会模糊、锯齿严重，端点也容易变形。

做法很简单：

• 把Canvas的width和height属性设置为目标显示尺寸的2倍
• 用CSS把Canvas缩回到你想要的显示尺寸
• 最后给绘图上下文设置对应缩放比例

示例代码：

<canvas id="timeline" width="800" height="40" style="width: 400px; height: 20px;"></canvas>

const canvas = document.getElementById('timeline');
const ctx = canvas.getContext('2d');
// 适配Retina屏的缩放
ctx.scale(2, 2);

2. 强制开启抗锯齿并确认端点设置 #

虽然Canvas默认应该启用抗锯齿，但有时候浏览器会因为性能或像素对齐逻辑关闭它。手动补全这些设置：

// 开启抗锯齿，兼容webkit内核
ctx.imageSmoothingEnabled = true;
ctx.webkitImageSmoothingEnabled = true;
// 确保端点设置为圆形（这个你大概率已经加了，但再确认一次）
ctx.lineCap = 'round';

3. 给坐标加上0.5px偏移 #

Mac Chrome的渲染引擎对整数像素的线条会做“像素对齐”，导致粗线条的端点被拉伸变形。把线条的起点、终点坐标稍微偏移0.5px，让线条在像素中间渲染，就能完美规避这个问题：

// 原来的整数坐标(10, 20)，改成带0.5的偏移坐标
ctx.beginPath();
ctx.moveTo(10.5, 20.5);
ctx.lineTo(390.5, 20.5);
ctx.lineWidth = 20;
ctx.stroke();

4. 手动组合线条与圆形端点（终极方案） #

如果上面的方法都不管用，那就换个思路：放弃用stroke()画整条线，改成矩形+两端圆形的组合绘制方式，这样能完全控制端点的形状，绝对不会变形：

const lineWidth = 20;
const startX = 10;
const endX = 390;
const y = 20;

// 绘制中间的矩形线条
ctx.fillRect(startX, y - lineWidth/2, endX - startX, lineWidth);
// 绘制左端圆形端点
ctx.beginPath();
ctx.arc(startX, y, lineWidth/2, 0, Math.PI * 2);
ctx.fill();
// 绘制右端圆形端点
ctx.beginPath();
ctx.arc(endX, y, lineWidth/2, 0, Math.PI * 2);
ctx.fill();

W3 Schools的示例应该已经悄悄处理了这些细节（比如像素缩放、坐标偏移），所以渲染效果正常。你可以对比自己的代码和他们的，看看哪一步没做到位~

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