Javascript CanvasRenderingContext2D.strokeRect仍然尝试反别名我的值，而不是绘制一个像素

我正在做一张图表，主要是作为练习。图形尝试通过线连接值，但如果值无法连接，则只绘制一个像素

在下面的示例中，我确保

minY

、

maxY

和

pixex

都是整数值。它们实际上来自我的真实代码中的

Int32Array

        // some min max range for this X pixel coordinate
        const minY = data[i].min;
        const maxY = data[i].max;
        // if there are multiple values on this X coordinate
        if (maxY - minY > 1) {
            ctx.beginPath();
            ctx.moveTo(pixelX + 0.5, minY + 0.5);
            ctx.lineTo(pixelX + 0.5, maxY + 0.5);
            ctx.closePath();
            ctx.stroke();
        }
        // otherwise just draw a pixel
        else {
            // if the value was interpolated, it's already colored for this pixel
            if (!valueIsInterpolated) {
                ctx.strokeRect(pixelX + 0.5, minY + 0.5, 1, 1);
            }
        }

当然，它应该只画一个像素，但相反，它画的是各种形状的矩形，在图形中看起来非常难看

如果我从调用中删除

+0.5

，它会是这样的：

---

那更糟。如何确保

strokeRect

只绘制一个像素？没有有趣的业务，没有反走样。只需标记一个像素。为什么会发生这种情况？

您使用的是

strokeRect（）

，它将绘制一个1像素矩形的轮廓，这意味着您将在所有方向上得到一个半像素的外部（假设线条的宽度为1像素），这将需要消除混叠

您可能希望使用

fillRect（）

来代替它，它将填充该1像素区域

const ctx=c.getContext（“2d”）；
对于（x=5；x
您确定画布以其设置的大小渲染吗？你确定没有设置刻度吗？您确定您的浏览器处于100%缩放（查看文本时不喜欢这样）。另外，您是否在高分辨率屏幕上？在屏幕截图上，你的像素实际上是由4*4像素组成的。如果是这样，问题1的答案可能是“否”，CSS缩放可能是您的问题。您可以尝试通过devicePixelRatio来缩放画布大小。最后，如果你想画出完美的像素，为什么不简单地使用
rect（）
和
fill
？对于rect不需要（假设线宽与奇数对齐），而且你仍然需要填充，因为笔划会在实际的向量框外“出血”。你是什么意思？笔划仅在其宽度上出血（如在其实际路径方向的90°处），在半像素垂直或水平方向上笔划宽度异常的线将不会导致抗锯齿；假设为对接线帽。（顺便说一句，您的“在所有方向”都是错误的）是的，但以框线为中心，因此，如果您的线封装了一个像素，它将在相对于该线的所有方向0.5像素外出血，这将导致抗锯齿。不过，填充该像素将填充封装区域内。只需运行包含的代码，以查看填充与笔划的一个像素的证据…啊，我的坏！他们正在使用strokeRect！我以为他们在第一个if块中使用lineTo。。。在这种情况下，不会有出血，其+0.5对于X是正确的，而不是Y。。。