p5.js中如何绘制真正1像素宽且颜色准确的纯色线条？

你遇到的渲染异常不是p5.js本身的bug，是HTML Canvas 2D API的坐标规则与抗锯齿机制共同导致的固有表现：

• Canvas的像素网格以像素边界为对齐基准，整数坐标值恰好落在4个相邻像素的交点处。当绘制1px宽的线条时，渲染引擎为了实现抗锯齿效果，会将线条向坐标点两侧各扩展0.5px，刚好覆盖2个像素列/行；同时因为抗锯齿会对线条边缘做透明混合，原本不透明的纯黑会和背景色中和为灰色，最终呈现出2px宽、发灰的视觉效果。
• 你之前尝试的blendMode(REPLACE)无法解决问题是正常现象，该混合模式会直接覆盖目标像素的透明度通道，除了最后绘制的图形外，其他同区域的绘制内容都会被清除，本身就不是用来处理抗锯齿问题的。

绘制正交（水平/垂直）1px线条时，只需要将对应坐标偏移0.5像素，让线条对齐单个像素的中心，就能完全避免跨像素抗锯齿，得到颜色准确的真正1px宽线条。
比如你原本的代码中line(20, 20, 380, 20)是水平直线，只需要把y坐标加0.5，改成line(20, 20.5, 380, 20.5)即可。
你也可以封装专用的1px画线函数，自动处理坐标偏移，减少重复操作：

function draw1pxLine(x1, y1, x2, y2) {
  push();
  strokeWeight(1);
  // 绘制像素风格内容时可以加上noSmooth()全局关闭抗锯齿
  const isHorizontal = y1 === y2;
  const isVertical = x1 === x2;
  // 水平线条偏移y坐标，垂直线条偏移x坐标
  if (isHorizontal) {
    y1 += 0.5;
    y2 += 0.5;
  } else if (isVertical) {
    x1 += 0.5;
    x2 += 0.5;
  }
  line(x1, y1, x2, y2);
  pop();
}

// 测试用例
function setup() {
  createCanvas(400, 100);
  background(200);
  stroke(0, 0, 0, 255);
  // 1px纯黑水平线
  draw1pxLine(20, 20, 380, 20);
  // 2px、4px线条不需要偏移，正常绘制即可
  strokeWeight(2);
  line(20, 40, 380, 40);
  strokeWeight(4);
  line(20, 60, 380, 60);
}

补充说明：对于非水平/垂直的斜线，0.5像素偏移无法完全消除抗锯齿效果，这是屏幕光栅化渲染的固有特性，所有基于Canvas 2D实现的绘图库都存在这个表现，不属于功能缺陷。如果需要完全无抗锯齿的像素风格斜线，可以通过set()方法逐像素手动绘制。

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