如何在画布中绘制水平线 - Javascript

在 Javascript 的 Canvas 中，我们可以使用 .beginPath()、moveTo() 和 lineTo() 方法来绘制线条。绘制水平线的方法是将起点和终点的 y 坐标设置为相同的值，然后使用 stroke() 方法进行绘制。

下面是一个示例代码：

const canvas = document.createElement('canvas');
canvas.width = 400;
canvas.height = 400;
document.body.appendChild(canvas);

const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(0, 50); // 设置起点坐标
ctx.lineTo(canvas.width, 50); // 设置终点坐标
ctx.stroke(); // 绘制线条

以上代码会在画布上绘制一条水平线，起点坐标为 (0, 50)，终点坐标为 (canvas.width, 50)。

需要注意的是，moveTo() 方法通常用于设置起点坐标，当需要绘制的线条有多个段落时，需要使用多次 moveTo() 和 lineTo() 方法来设置每一个段落的起点和终点坐标，例如：

ctx.beginPath();
ctx.moveTo(0, 50);
ctx.lineTo(100, 50);
ctx.moveTo(150, 50);
ctx.lineTo(250, 50);
ctx.stroke();

以上代码会在画布上绘制两个水平线段，第一个线段起点坐标为 (0, 50)，终点坐标为 (100, 50)，第二个线段起点坐标为 (150, 50)，终点坐标为 (250, 50)。

总的来说，在 Javascript 的 Canvas 中绘制水平线非常简单，只需要设置起点和终点的 y 坐标相同，然后使用 stroke() 方法进行绘制即可。当需要绘制多个段落的水平线时，需要使用多次 moveTo() 和 lineTo() 方法来设置每一个段落的起点和终点坐标。