在 html5 画布中绘制单像素线

【问题标题】：Draw single pixel line in html5 canvas在 html5 画布中绘制单像素线
【发布时间】：2013-07-17 03:52:28
【问题描述】：

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

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

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

这是一个例子http://jsfiddle.net/z4VJq/

【问题讨论】：

你的画布上可能有 CSS 样式吗？
@EvilP 查看我帖子中的示例
看这个：jsfiddle.net/z4VJq/5;我已将画布放大 5 倍以帮助您了解发生了什么。

标签： html canvas

【解决方案1】：

改为使用以下坐标调用您的函数：drawLine(30,30.5,300,30.5);。在jsFiddle 试试吧。

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

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

您可以在 Canvas tutorial: A lineWidth example 上阅读更多相关信息。

【讨论】：

但如果你把 lineWidth 放大一点，你会看到模糊 context.lineWidth =10;
@mgraph: 没错，你是对的，lineWidth = 10 会模糊不清，因为它是一个偶数，但如果你设置了lineWidth = 11，则不是，它应该是这样的。
于是我在X上加了0.5，结果还是一样。