moveTo和lineTo是路径绑制中最常用的两个方法。moveTo移动画笔位置，lineTo绑制直线。
moveTo将画笔移动到指定位置，不留下痕迹：
ctx.moveTo(x, y)
| 参数 | 类型 | 说明 |
|---|---|---|
| x | number | 目标位置的x坐标 |
| y | number | 目标位置的y坐标 |
lineTo从当前位置画直线到目标位置：
ctx.lineTo(x, y)
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
ctx.beginPath()
ctx.moveTo(50, 50) // 移动到起点
ctx.lineTo(200, 150) // 画线到终点
ctx.stroke()
lineTo会从上一个点继续：
ctx.beginPath()
ctx.moveTo(50, 50)
ctx.lineTo(150, 50) // 第一段
ctx.lineTo(150, 150) // 第二段
ctx.lineTo(50, 150) // 第三段
ctx.closePath() // 闭合
ctx.stroke()
使用多个moveTo创建独立图形：
ctx.beginPath()
// 第一个图形
ctx.moveTo(50, 50)
ctx.lineTo(100, 50)
ctx.lineTo(100, 100)
ctx.closePath()
// 第二个图形（新的moveTo）
ctx.moveTo(150, 50)
ctx.lineTo(200, 50)
ctx.lineTo(200, 100)
ctx.closePath()
ctx.stroke()
封装相对坐标的画线函数：
function line(ctx, x1, y1, x2, y2) {
ctx.beginPath()
ctx.moveTo(x1, y1)
ctx.lineTo(x2, y2)
ctx.stroke()
}
// 使用
line(ctx, 50, 50, 200, 150)
Canvas没有直接获取当前位置的方法，需要自己维护：
let currentX = 0
let currentY = 0
function myMoveTo(ctx, x, y) {
ctx.moveTo(x, y)
currentX = x
currentY = y
}
function myLineTo(ctx, x, y) {
ctx.lineTo(x, y)
currentX = x
currentY = y
}
没有moveTo时
ctx.beginPath()
ctx.lineTo(100, 100) // 从(0,0)开始
ctx.stroke()
如果第一个操作是lineTo，起点默认为(0,0)。
连续使用moveTo
ctx.beginPath()
ctx.moveTo(50, 50)
ctx.moveTo(100, 100) // 覆盖上一个moveTo
ctx.lineTo(200, 200)
ctx.stroke()
// 只显示从(100,100)到(200,200)的线
lineTo创建子路径
ctx.beginPath()
ctx.moveTo(50, 50)
ctx.lineTo(100, 100)
ctx.moveTo(150, 50) // 新的子路径
ctx.lineTo(200, 100)
ctx.stroke()