moveTo() 简介

moveTo() 是 Canvas 2D 上下文中用于移动画笔到指定坐标的方法，它不画线，只是改变当前绘制位置。

语法

ctx.moveTo(x, y);

类比理解

就像拿笔在纸上画画：

• moveTo() = 把笔抬起来，移动到另一个位置放下去，移动过程中不留下痕迹
• lineTo() = 笔尖不离开纸面，画出一条线

基本用法

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

ctx.beginPath();
ctx.moveTo(50, 50);      // 移动到 (50, 50)，不画线
ctx.lineTo(200, 50);     // 从 (50, 50) 画线到 (200, 50)
ctx.lineTo(200, 200);    // 从 (200, 50) 画线到 (200, 200)
ctx.stroke();            // 描边显示路径

典型应用场景

1. 绘制多条不相连的线段：

ctx.beginPath();
ctx.moveTo(50, 50);     // 第一条线起点
ctx.lineTo(150, 50);    // 第一条线终点

ctx.moveTo(50, 100);    // 抬起笔，移动到第二条线起点
ctx.lineTo(150, 100);   // 第二条线终点

ctx.moveTo(50, 150);    // 抬起笔，移动到第三条线起点
ctx.lineTo(150, 150);   // 第三条线终点

ctx.stroke();           // 一次性画出三条独立的水平线

2. 绘制折线图：

const data = [120, 85, 160, 95, 140, 180, 130];

ctx.beginPath();
ctx.moveTo(50, 300 - data[0]);  // 移动到第一个数据点

for (let i = 1; i < data.length; i++) {
  ctx.lineTo(50 + i * 60, 300 - data[i]);
}

ctx.strokeStyle = 'blue';
ctx.lineWidth = 2;
ctx.stroke();

3. 绘制多边形：

ctx.beginPath();
ctx.moveTo(100, 50);     // 顶点
ctx.lineTo(170, 135);    // 右下
ctx.lineTo(145, 220);    // 左下
ctx.lineTo(55, 220);     // 左下
ctx.lineTo(30, 135);     // 右上
ctx.closePath();         // 回到起点，形成五边形
ctx.fillStyle = 'gold';
ctx.fill();

注意事项

与 lineTo() 的区别

一句话总结

moveTo() 就像把笔抬起来挪个地方再放下，方便你在画布的不同位置分别绘制图形，而不产生多余的连线。