为何HTML Canvas描边颜色显示偏浅？

问题原因 #

描边颜色偏浅本质是Canvas默认的抗锯齿（反走样）机制导致的：

• 当使用strokeRect(10,10,50,50)时，描边线条的边缘刚好落在像素的整数边界上，抗锯齿会自动将线条边缘与背景色（白色）混合，让原本的纯红色（#ff0000）变成半透明的混合色（#ff8080），黑色变灰色也是同样的逻辑。
• 而填充矩形用了12.5这类半整数坐标，刚好对齐像素中心，不会触发跨像素的抗锯齿混合，所以颜色显示正常。

解决办法 #

1. 调整描边坐标到半整数位置 #

将描边的起始坐标改为半整数，让线条中心对齐像素中心，避免边缘横跨像素：

context.strokeRect(10.5, 10.5, 50, 50)

2. 关闭抗锯齿 #

直接禁用Canvas的图像平滑功能，彻底关闭抗锯齿，但会导致图形边缘出现明显锯齿：

context.imageSmoothingEnabled = false;

3. 适配描边宽度 #

默认描边宽度为1（奇数），如果将描边宽度设为偶数，整数坐标也能避免抗锯齿混合，但会改变线条粗细：

context.lineWidth = 2;
context.strokeRect(10, 10, 50, 50)

修复后的完整代码 #

render()

function render() {
  var canvas = document.createElement("canvas")
  canvas.width = 100
  canvas.height = 100

  var context = canvas.getContext("2d")

  // 使用半整数坐标修复描边颜色
  context.strokeStyle = "red"
  context.strokeRect(10.5, 10.5, 50, 50)

  context.fillStyle = "red"
  context.fillRect(12.5, 12.5, 45, 45)
  
  document.body.appendChild(canvas)
}

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