请说说canvas的closePath()与lineTo()的区别是什么？

在 Canvas API 中，closePath() 和 lineTo() 都是用于绘制路径的方法，但它们的作用不同：

• lineTo(x, y): 将当前路径的终点移动到指定的坐标 (x, y)，并添加一条从当前位置到新位置的直线。 这意味着 lineTo() 会在画布上实际绘制一条线。

• closePath(): 尝试通过添加一条从当前点到当前路径起始点的直线来关闭当前路径。它不会将当前位置移动到路径的起始点，只是添加一条连接线。 如果当前路径已经闭合，或者只有一个点，则此函数不执行任何操作。 closePath() 经常与 fill() 方法一起使用，以便填充封闭区域。

关键区别总结：

特性	lineTo(x, y)	closePath()
绘制直线	绘制到指定坐标的直线	绘制到路径起点的直线
移动当前位置	将当前位置移动到指定坐标	不移动当前位置
闭合路径	不闭合路径	闭合路径
用途	绘制任意形状的线段	闭合形状以便填充或创建闭合区域

示例说明：

假设我们想绘制一个三角形。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(10, 10); // 移动到起始点
ctx.lineTo(100, 10); // 绘制第一条边
ctx.lineTo(50, 100); // 绘制第二条边

// 使用 lineTo() 绘制第三条边 (不闭合)
ctx.lineTo(10, 10);
ctx.stroke(); // 绘制三角形的轮廓


ctx.beginPath(); // 开始新的路径
ctx.moveTo(150, 10); // 移动到新的起始点
ctx.lineTo(240, 10); // 绘制第一条边
ctx.lineTo(195, 100); // 绘制第二条边

// 使用 closePath() 闭合路径
ctx.closePath();
ctx.fill(); // 填充三角形

在这个例子中，第一个三角形使用 lineTo() 回到起始点，绘制了完整的三角形轮廓。第二个三角形使用 closePath() 闭合路径，并使用 fill() 方法填充了三角形。

总而言之，lineTo() 用于绘制到特定点的线段，而 closePath() 用于闭合路径，通常用于填充形状。 选择哪种方法取决于你想要实现的效果。