HTML Canvas 2D上下文相同参数绘制的线条渲染效果不同是什么原因

问题成因与专业术语 #

• 该现象的专业名称是 像素对齐（Pixel Alignment）问题，本质是Canvas 2D的亚像素绘制规则与抗锯齿机制共同作用的结果。
• Canvas 2D上下文绘制线条时，线宽会沿路径中心向两侧均匀扩展：
  1. 当你设置lineWidth = 1时，线条会在路径中心线的上下/左右各占0.5像素的宽度
  2. 如果路径的坐标刚好落在整数像素位上，线条就会跨两个相邻的物理像素，抗锯齿机制会把这两个像素都渲染为半透明，最终线条看起来发虚、颜色偏淡
  3. 如果路径的坐标刚好落在半像素位（如y = 286.5），线条会刚好填满单个物理像素，抗锯齿不会触发，线条看起来更清晰、颜色更深
• 两条线条效果不同的核心原因是路径的坐标精度不同：你代码中正六边形的底部水平边的y坐标由三角函数计算得出，是带小数的非整数值，刚好对齐到单像素填充范围；而三角形的顶部水平边的y坐标是canvas.height * 3 / 4 = 300，是整数，因此触发跨像素抗锯齿，显示效果更虚。
• 你之前放大画布尺寸但没解决的原因是：你没有修正路径坐标的对齐问题，即便画布放大，坐标的小数位差异依然会导致抗锯齿效果不一致。

可搜索的排查关键词 #

你可以用以下关键词搜索解决方案：

• Canvas 像素对齐
• Canvas 1px线条发虚
• Canvas subpixel rendering
• Canvas lineWidth anti-aliasing

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