JS Graphics2D绘图线条质量不佳问题求助

问题原因 #

Canvas的绘制坐标基于浮点精度，当设置lineWidth=1时，线条会以路径为中心向两侧各延伸0.5px。如果绘制用的是整数坐标（比如strokeRect(3,3,...)），线条会横跨两个相邻像素，浏览器会启用抗锯齿（Anti-aliasing）模糊边缘，导致线条视觉上发虚、偏灰，比CSS的1px边框更宽。

而CSS的border:1px solid black是直接对齐像素边界的，只会覆盖单个像素，因此呈现纯黑实边。

淡阴影线的本质 #

你放大后看到的线条两侧淡阴影，就是浏览器抗锯齿生成的半透明过渡像素。当线条无法完全贴合单个像素时，浏览器会用半透明颜色填充相邻像素实现平滑过渡，这些像素在放大后就会显现为淡色线条。

解决方案 #

1. 坐标偏移0.5px（推荐） #

将绘制坐标偏移0.5px，让线条中心正好落在像素边界上，1px的线条会完全覆盖单个像素，不会触发抗锯齿：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext("2d");
ctx.lineWidth = 1;
ctx.strokeStyle = "black";
// 偏移0.5px对齐像素边界
ctx.strokeRect(3.5, 3.5, 150, 150);

2. 关闭抗锯齿（不推荐） #

通过关闭Canvas图像平滑功能禁用抗锯齿，但会导致斜线、曲线边缘粗糙，仅适合纯水平/垂直线条场景：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext("2d");
ctx.imageSmoothingEnabled = false; // 关闭抗锯齿
ctx.lineWidth = 1;
ctx.strokeStyle = "black";
ctx.strokeRect(3, 3, 150, 150);

3. 用fillRect模拟边框 #

如果需要更高精度的边框，可直接用填充矩形模拟1px边框：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext("2d");
ctx.fillStyle = "black";
// 上边框
ctx.fillRect(3, 3, 150, 1);
// 右边框
ctx.fillRect(3+150, 3, 1, 150);
// 下边框
ctx.fillRect(3, 3+150, 150, 1);
// 左边框
ctx.fillRect(3, 3, 1, 150);

修正后的完整代码 #

<canvas id="canvas" width="200" height="200" style="border:1px solid black"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext("2d");
ctx.lineWidth = 1;
ctx.strokeStyle = "black";
ctx.strokeRect(3.5, 3.5, 150, 150);
</script>

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