我们知道,使用以下2个API可以绘制一条线段:
- moveTo(x, y) 向当前路径中增加一条子路径,该子路径只包含一个点,此为线段的起始点
- lineTo(x, y) 将线段的下一个点加入子路径中
context.strokeStyle = 'rgb(200, 200, 0)';
context.lineWidth = 1;
context.beginPath();
context.moveTo(0, 50);
context.lineTo(450, 50);
context.stroke();
但是你会发现,这条线段的宽度并不是1px,而是2px。
再画一条宽度为2px的线段。
context.lineWidth = 2;
context.beginPath();
context.moveTo(0, 60);
context.lineTo(450, 60);
context.stroke();
这条线段宽度与第一条相同,只是颜色更深一些。
再画一条宽度为1px的线段。
context.lineWidth = 1;
context.beginPath();
context.moveTo(0, 70.5);
context.lineTo(450, 70.5);
context.stroke();
可以看到,宽度确实比前两条线段窄。
为什么第一条线段的宽度不是1px呢?
这与canvas的绘制逻辑有关,当我们试图绘制一个线段时,canvas会读取lineWidth,,然后尝试将在坐标处两边各绘制一半的lineWidth,比如在坐标(0,2)绘制一条水平线,canvas会以坐标2 为中线,向上向下各绘制0.5px。但是,在1px之内,不可能只绘制0.5px,所以,它会继续延伸,填满整个像素。最后,加在一起就是2px了。
如果,将坐标点换成(0,1.5),沿着中心线绘制后,正好填满了整个像素,所以没有延伸。最后宽度就是1px。
建议
在实际应用中,如果想得到更好的体验,精确的像素值,如果线段的宽度是奇数像素,绘制时以n.5,即半数像素作为中轴线,如果线段的宽度为偶数像素,绘制时以n.0,即整数像素作为中轴线
参考博客:
https://www.cnblogs.com/v-rockyli/p/3833845.html