我們知道，使用以下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();

但是你會發(fā)現(xiàn)，這條線段的寬度并不是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，所以，它會繼續(xù)延伸，填滿整個像素。最后，加在一起就是2px了。

如果，將坐標點換成（0，1.5），沿著中心線繪制后，正好填滿了整個像素，所以沒有延伸。最后寬度就是1px。

建議

在實際應用中，如果想得到更好的體驗，精確的像素值，如果線段的寬度是奇數像素，繪制時以n.5，即半數像素作為中軸線，如果線段的寬度為偶數像素，繪制時以n.0，即整數像素作為中軸線

參考博客：

https://www.cnblogs.com/v-rockyli/p/3833845.html

轉載于:https://www.cnblogs.com/liulei-cherry/p/9915182.html

總結

以上是生活随笔為你收集整理的Canvas入门06-线段与像素边界的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。