本文为笔记！
如图：
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
