在canvas上绘制1px厚的线会创build2px的粗线

在这个jsfiddle中，有一行lineWidth为1。

http://jsfiddle.net/mailrox/9bMPD/350/

例如：

ctx.lineWidth = 1; 

但是，如果在canvas上绘制的线条的粗细为2px，那么您将如何创build1px的粗线条。

我可以绘制一个矩形（1px高度），但是我希望线也可以在对angular线上工作。 那么你如何得到这条线是1px高？

谢谢！

Answer 1

canvas从一个像素的一半计算

 ctx.moveTo(50,150.5); ctx.lineTo(150,150.5); 

所以从一开始就会解决它

修正版本： http : //jsfiddle.net/9bMPD/357/

这个答案解释了为什么这样工作。

Answer 2

您还可以在X和Y方向上翻转半个像素，然后使用整个值作为坐标（在某些情况下，您可能需要四舍五入）：

 context.translate(0.5, 0.5) context.moveTo(5,5); context.lineTo(55,5); 

请记住，如果您调整canvas大小，翻译将被重置 – 所以您将再次翻译。

这个答案解释了为什么这样工作。

Answer 3

或者，正如这个答案所述，为了得到1的宽度，你需要从半像素开始。

 ctx.moveTo(50.5,150.5); ctx.lineTo(150.5,150.5); 

http://jsfiddle.net/9bMPD/355/

Answer 4

你有没有看到第一次在谷歌 ？ （searchcanvas line width 1px ）。 虽然我不得不承认这不完全是“干净”或“精益”。 渡轮Kobus的解决scheme好多了。 然后再次：它吮吸你需要使用“半像素”在第一个地方…

Answer 5

canvas可以用fillRect（）绘制干净的直线。 一个高度为1px或宽度为1px的矩形可以完成这项工作。 它不需要半像素值：

 var ctx = document.getElementById("myCanvas").getContext("2d"); ctx.drawVerticalLine = function(left, top, width, color){ this.fillStyle=color; this.fillRect(left, top, 1, width); }; ctx.drawHorizontalLine = function(left, top, width, color){ this.fillStyle=color; this.fillRect(left, top, width, 1); } ctx.drawVerticalLine(150, 0, 300, "green"); ctx.drawHorizontalLine(0, 150, 300, "red"); 

https://jsfiddle.net/ynur1rab/

Answer 6

fillRect（）方法可以用来在canvas上绘制细的水平或垂直线条（无需在坐标上应用+0.5的位移）：

 this.fillRect(left, top, 1, height); this.fillRect(left, top, width, 1); 

而且你可以通过用下面的代码replace这些代码来使得代码变得更加简洁：

 this.fillRect(left, top, 0.7, height); this.fillRect(left, top, width, 0.7); 

线条会变细（趋向于1像素宽），但它们的颜色有点衰减。

– >工作例子

需要注意的是，如果我们设置ctx.lineWidth = 0.7（对于经典的beginPath / moveTo / lineTo / stroke序列），它在Chrome上不起作用（0.7和1被解释为相同的方式）。 因此，这个fillRect（）方法的兴趣。