moveTo() 方法简单讲解

---

一、含义

moveTo(x, y) 是 Canvas 2D 上下文中用于移动画笔到指定坐标的方法。它不画任何线条，只是把画笔的当前位置移动到新的起点。

---

二、词源

单词	词源	含义
move	古法语 movoir（移动）	移动、挪动
To	古英语 tō（朝向）	到、朝向
moveTo	组合词	移动到

---

三、语法

ctx.moveTo(x, y);

• x：目标位置的 X 坐标

• y：目标位置的 Y 坐标

• 返回值：无

---

四、直观比喻

想象你拿着笔在纸上画画：

动作	对应方法	效果
把笔放在纸上某点	moveTo(10, 10)	笔尖定位到 (10,10)，还没画
移动笔并画线	lineTo(50, 50)	从当前位置画线到 (50,50)
抬起笔移动到新位置	moveTo(100, 100)	笔尖抬起，移到 (100,100)，不画线

---

五、为什么需要 moveTo()？

如果没有 moveTo()，所有线条都会从上一个终点连续画下去：

// 没有 moveTo 的问题
ctx.beginPath();
ctx.lineTo(50, 50);   // 从默认起点(0,0)画到(50,50)
ctx.lineTo(100, 0);   // 从(50,50)画到(100,0)
// 结果：两条线连在一起，形成一个折线

用 moveTo() 可以画出不相连的独立线条：

// 画两条独立的线
ctx.beginPath();
ctx.moveTo(10, 10);    // 抬起笔，移到(10,10)
ctx.lineTo(50, 10);    // 画第一条线
ctx.moveTo(10, 30);    // 抬起笔，移到(10,30)（不画线）
ctx.lineTo(50, 30);    // 画第二条线（与第一条不相连）
ctx.stroke();          // 同时描边两条线

---

六、在五子棋中的应用

五子棋代码中没有直接用 moveTo()，但如果要画棋盘上的交叉点标记或画棋子，就会用到：

// 在交叉点画一个圆点标记
ctx.beginPath();
ctx.moveTo(x, y);      // 移动到交叉点（准备画圆）
ctx.arc(x, y, 3, 0, 2 * Math.PI);
ctx.fill();

---

七、总结

问题	答案
moveTo() 是什么？	移动画笔到指定位置的方法
会画线吗？	❌ 不会，只是移动
为什么需要？	画独立线条前要先定位
类比	抬起笔，挪到新位置再落笔