canvas 画的线粗而且不清晰解决办法

本文为笔记！

如图：

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

参考：
canvas划线太粗并且模糊解决方法