在html5画布中绘制单个像素线

Question

当我尝试使用以下代码绘制单像素黑线时：

    context.strokeStyle = '#000'; 
    context.beginPath();
    context.moveTo(x1, y1); 
    context.lineTo(x2, y2);
    context.lineWidth = 1;
    context.stroke();
    context.closePath();  

我有一条带灰色边框的像素线。如何解决？

以下是http://jsfiddle.net/z4VJq/

的示例

Answer 1

使用这些坐标调用您的函数：drawLine(30,30.5,300,30.5);。在jsFiddle中尝试。

问题是您的颜色将位于边缘，因此颜色将位于边缘上方的像素中间和边缘下方的中间位置。如果将线的位置设置在整数的中间，则将在像素线内绘制。

这张照片（来自下面的链接文章）说明了这一点：

您可以在Canvas tutorial: A lineWidth example上了解详情。