当我尝试使用以下代码绘制单像素黑线时：
context.strokeStyle = '#000';
context.beginPath();
context.moveto(x1,y1);
context.lineto(x2,y2);
context.linewidth = 1;
context.stroke();
context.closePath();
我有多个像素线与灰色边框。如何解决？
这是一个例子http://jsfiddle.net/z4VJq/
解决方法
用这些坐标代替你的函数：drawLine(30,30.5,300,30.5);.尝试在
jsFiddle。
问题是您的颜色将处于一个边缘，所以颜色将在边缘上方的像素的上方和边缘下方的中间一半。如果将行的位置设置在整数的中间，则它将在像素行内绘制。
这张照片(从下面链接的文章)说明：
您可以在Canvas tutorial: A lineWidth example上阅读更多。