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

在前端开发中，Canvas 是一个非常有用的工具，它允许开发者在网页上绘制图形。closePath() 和 lineTo() 是 CanvasRenderingContext2D 接口中的两个方法，它们在绘制路径时有着不同的作用。

1. lineTo(x, y)

lineTo(x, y) 方法用于在画布上创建一条从当前点到指定 (x, y) 坐标的直线。当你调用这个方法时，它并不会立即在画布上绘制这条线，而是将这条线添加到当前的路径中。要实际绘制这条线，你需要调用 stroke() 方法。

例如：

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

ctx.beginPath(); // 开始新的路径
ctx.moveTo(50, 50); // 设置路径的起始点
ctx.lineTo(150, 50); // 创建一条到 (150, 50) 的直线
ctx.stroke(); // 绘制路径

2. closePath()

closePath() 方法用于关闭当前路径。当你调用这个方法时，它会创建一条从当前点到路径起始点的直线，从而形成一个封闭的图形。然而，与 lineTo() 不同的是，closePath() 不会自动绘制这条封闭线。要绘制它，你仍然需要调用 stroke() 或 fill() 方法。

closePath() 主要用于绘制封闭图形，如矩形、圆形或自定义的多边形。调用 closePath() 后，你可以继续在同一画布上绘制其他路径，而不会影响之前已经关闭的路径。

例如：

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

ctx.beginPath(); // 开始新的路径
ctx.moveTo(50, 50); // 设置路径的起始点
ctx.lineTo(150, 50); // 创建一条到 (150, 50) 的直线
ctx.lineTo(150, 150); // 创建一条到 (150, 150) 的直线
ctx.closePath(); // 关闭路径，创建一条回到起始点的直线
ctx.stroke(); // 绘制路径

在这个例子中，即使你没有显式地调用 lineTo() 来创建一条回到起始点的直线，closePath() 也会为你完成这个任务，从而形成一个封闭的三角形。

总结：

• lineTo(x, y) 用于在路径中添加一条直线，从当前点到指定的 (x, y) 坐标。
• closePath() 用于关闭当前路径，创建一个回到路径起始点的直线，从而形成一个封闭的图形。这两个方法都需要与 stroke() 或 fill() 配合使用来实际绘制路径。