怎么调整 Canvas 的线条宽度

可以通过设置 CanvasRenderingContext2D 对象的 lineWidth 属性来调整 Canvas 的线条宽度。例如：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.lineWidth = 5;

这样就将线条宽度设置为 5 像素。需要注意的是，线条宽度是相对于 Canvas 坐标系中的单位的，而不是屏幕上的像素。也就是说，如果 Canvas 的实际大小是 200x200 像素，那么设置 lineWidth 为 5，实际上线条宽度是 5/200 = 0.025，也就是 2.5% 的 Canvas 宽度。

相关问题

canvas 添加遮罩层后线条宽度变化

canvas 添加遮罩层后线条宽度变化，是因为 canvas 的宽度和高度改变，导致 canvas 中的坐标系也发生了改变，而线条的宽度是以像素为单位来计算的，因此在新的坐标系中，线条的宽度也会发生变化。

解决这个问题的方法是，可以在绘制线条之前，先将 canvas 的宽度和高度保存下来，然后在绘制线条之后，将 canvas 的宽度和高度恢复为之前的值。具体的实现方法如下：

// 保存 canvas 的宽度和高度
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;

// 将 canvas 的宽度和高度调整为遮罩层的宽度和高度
canvas.width = maskWidth;
canvas.height = maskHeight;

// 绘制遮罩层
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
ctx.fillRect(0, 0, maskWidth, maskHeight);

// 将 canvas 的宽度和高度恢复为之前的值
canvas.width = canvasWidth;
canvas.height = canvasHeight;

// 绘制线条
ctx.strokeStyle = 'red';
ctx.lineWidth = 5;
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.stroke();

这样就可以避免遮罩层对线条宽度的影响了。需要注意的是，在调整 canvas 的宽度和高度之后，之前绘制的内容会被清空，因此需要在重新绘制之前保存好之前的绘制状态。

Canvas 线条模糊

Canvas 线条模糊可能是因为以下原因：

1. Canvas 的渲染分辨率和屏幕分辨率不匹配，导致图像模糊。

2. 画布的大小或线条的宽度设置不合适，导致图像模糊。

3. Canvas 的抗锯齿属性没有开启，导致图像边缘模糊。

解决方法：

1. 将 Canvas 的渲染分辨率设置为屏幕分辨率，可以使用 CSS 的缩放属性实现。

2. 调整画布的大小或线条的宽度，使其与屏幕分辨率匹配。

3. 开启 Canvas 的抗锯齿属性，可以使用 CSS 的 image-rendering 属性或 Canvas 的 imageSmoothingEnabled 属性实现。