本文為筆記！

如圖：

image.png

解決步驟：

1.設(shè)置canvas width和height，注意不是css的style width和height

image.png

2.繪制新的線條時先調(diào)用 ctx.beginPath();
3.在畫線時用moveTo()和lineTo()函數(shù)時，應(yīng)該將x,y參數(shù)位置的值設(shè)置為 整數(shù)+0.5，而不是整數(shù)。

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

參考：
canvas劃線太粗并且模糊解決方法