绘制单个像素线HTML5画布

当我尝试绘制单个像素的黑线用下面的代码：绘制单个像素线HTML5画布

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

我有灰色边框一个以上像素线。如何解决它？

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

来源

2012-02-16 Neir0

在您的画布上是否可能有CSS样式？ – 2012-02-16 12:43:06

@EvilP在我的文章中看到示例 – Neir0 2012-02-16 12:48:05

请参阅：http://jsfiddle.net/z4VJq/5/;我将画布放大了5倍，以帮助您了解正在发生的事情。 – Phrogz 2012-02-16 13:46:12

调用这些坐标，而不是你的函数：drawLine(30,30.5,300,30.5);。试试jsFiddle。

问题是，你的颜色将在一个边缘，所以颜色将在边缘上方和边缘下方的像素的一半。如果将线的位置设置在整数中间，则会在像素线内绘制线。

这张照片（从下面链接的文章），说明它：

enter image description here

你可以阅读更多有关这对Canvas tutorial: A lineWidth example。

来源

2012-02-16 13:08:36 Jonas

但是如果你使'lineWidth'稍大一点，你会看到模糊'context.lineWidth = 10;' – mgraph 2012-02-16 13:14:59

am使用最新的Chrome – mgraph 2012-02-16 13:18:54

@mgraph：是的，你是对的，你用'lineWidth = 10'模糊了，因为它是一个偶数，但是如果你设置了'lineWidth = 11'，那应该是这样。 – Jonas 2012-02-16 13:20:18

绘制单个像素线HTML5画布

回答

相关问题