在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/

- Neir0

---

你的画布上可能有CSS样式吗？ - mas-designs

@EvilP，请看我帖子中的例子。 - Neir0

请查看此链接：http://jsfiddle.net/z4VJq/5/；我已经将画布放大了五倍，以帮助您理解发生了什么。 - Phrogz

Answer 1

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

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

这张图片（来自下面链接文章）说明了这一点： 您可以在Canvas教程：lineWidth示例中了解更多相关内容。

- Jonas

---

但如果你把 lineWidth 变大一点，你会看到模糊的效果 context.lineWidth = 10;。 - mgraph

@mgraph：没错，你说得对。如果 lineWidth = 10，会出现模糊的情况，因为它是一个偶数。但是如果你将 lineWidth 设置为 11，就不会出现这种情况了，这才是正确的做法。 - Jonas

所以我将0.5加到X上，结果仍然相同。 - gegobyte

Answer 2

您需要使用context.translate(.5,.5);来将所有内容偏移半个像素。这是解决问题的简单方法。

var canvas = document.getElementById("canvas1");
var context1 = canvas.getContext('2d');
context1.strokeStyle = '#000'; 
context1.beginPath();
context1.moveTo(10, 5); 
context1.lineTo(300, 5);
context1.stroke();

var canvas2 = document.getElementById("canvas2");
var context2 = canvas2.getContext('2d');
context2.translate(.5,.5);
context2.strokeStyle = '#000'; 
context2.beginPath();
context2.moveTo(10, 5); 
context2.lineTo(300, 5);
context2.stroke();

<div><canvas height='10' width='300' id='canvas1'>Обновите браузер</canvas></div>
<div><canvas height='10' width='300' id='canvas2'>Обновите браузер</canvas></div>

- Pete Pearl