在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教程:lineWidth示例中阅读更多相关信息.