html canvas lineTo()方法绘制一条直线

html canvas 的 lineTo() 方法可以用来绘制一条直线。它接受两个参数，第一个参数是 x 轴坐标，第二个参数是 y 轴坐标，它们表示直线的起点和终点。使用 lineTo() 方法，可以在 canvas 上绘制复杂的图形，例如矩形、圆形、三角形等。

使用方法

// 设置 canvas 的宽度和高度
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.canvas.width = 500;
ctx.canvas.height = 500;

// 设置起点和终点的坐标
var x1 = 100;
var y1 = 100;
var x2 = 400;
var y2 = 400;

// 绘制直线
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();

上面的代码中，我们设置 canvas 的宽度和高度，设置起点和终点的坐标，使用 lineTo() 方法绘制一条直线。

注意事项

• lineTo() 方法只能用来绘制直线，不能用来绘制圆弧或曲线。
• 使用 lineTo() 方法绘制的直线不会自动闭合，需要手动调用 closePath() 方法来闭合。
• lineTo() 方法可以用来绘制多边形，但是要注意，多边形的起点和终点必须是重合的，否则会出现问题。