本文為筆記！
如圖：
image.png
解決步驟：
1.設置canvas width和height，注意不是css的style width和height
image.png
2.繪制新的線條時先調用 ctx.beginPath();
3.在畫線時用moveTo()和lineTo()函數時，應該將x,y參數位置的值設置為 整數+0.5，而不是整數。
image.png
下面演示效果
錯誤代碼如下：
// 畫線
drawGridLine(ctx, beginPoints = [], endPoints = []) {
if (!beginPoints.length === 2 || !endPoints.length === 2) return
ctx.moveTo(beginPoints[0], beginPoints[1]);
ctx.lineTo(endPoints[0], endPoints[1]);
ctx.lineWidth = 1
ctx.strokeStyle = this.gridLineColor
ctx.lineCap = "butt";
ctx.stroke();
}
效果為：
image.png
加上
ctx.beginPath()，可以看到線條變淺
image.png
image.png
+0.5后：
image.png
微信截圖_20231122105042.png
