lineTo() 简介

lineTo() 是 Canvas 2D 上下文中用于从当前画笔位置画一条直线到指定坐标的方法。

语法

ctx.lineTo(x, y);

基本用法

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

ctx.beginPath();
ctx.moveTo(50, 50);      // 先把笔放到起点
ctx.lineTo(200, 50);     // 从 (50,50) 画线到 (200,50)
ctx.lineTo(200, 200);    // 再从 (200,50) 画线到 (200,200)
ctx.stroke();            // 描边显示路径

执行流程

moveTo(50, 50)  →  当前位置: (50, 50)
lineTo(200, 50) →  从 (50,50) 画到 (200,50)，当前位置更新为 (200, 50)
lineTo(200, 200)→  从 (200,50) 画到 (200,200)，当前位置更新为 (200, 200)

每次调用 lineTo() 后，画笔位置会自动更新到终点坐标，方便连续绘制。

典型应用

1. 绘制三角形：

ctx.beginPath();
ctx.moveTo(100, 50);     // 顶部顶点
ctx.lineTo(175, 185);    // 画到底部右侧
ctx.lineTo(25, 185);     // 画到底部左侧
ctx.closePath();         // 自动画回顶部顶点，闭合图形
ctx.fillStyle = 'orange';
ctx.fill();

2. 绘制网格线：

// 画水平线
for (let y = 0; y <= 400; y += 50) {
  ctx.beginPath();
  ctx.moveTo(0, y);
  ctx.lineTo(400, y);
  ctx.strokeStyle = '#ddd';
  ctx.stroke();
}

// 画垂直线
for (let x = 0; x <= 400; x += 50) {
  ctx.beginPath();
  ctx.moveTo(x, 0);
  ctx.lineTo(x, 400);
  ctx.strokeStyle = '#ddd';
  ctx.stroke();
}

3. 绘制箭头：

function drawArrow(ctx, fromX, fromY, toX, toY) {
  const headLen = 15;    // 箭头长度
  const angle = Math.atan2(toY - fromY, toX - fromX);

  ctx.beginPath();
  ctx.moveTo(fromX, fromY);
  ctx.lineTo(toX, toY);
  ctx.stroke();

  // 画箭头头部
  ctx.beginPath();
  ctx.moveTo(toX, toY);
  ctx.lineTo(
    toX - headLen * Math.cos(angle - Math.PI / 6),
    toY - headLen * Math.sin(angle - Math.PI / 6)
  );
  ctx.lineTo(
    toX - headLen * Math.cos(angle + Math.PI / 6),
    toY - headLen * Math.sin(angle + Math.PI / 6)
  );
  ctx.closePath();
  ctx.fillStyle = 'black';
  ctx.fill();
}

与 moveTo() 配合使用

// 画一个 "Z" 字形
ctx.beginPath();
ctx.moveTo(50, 50);      // Z 的起点
ctx.lineTo(150, 50);     // 顶部横线
ctx.lineTo(50, 150);     // 斜线
ctx.lineTo(150, 150);    // 底部横线
ctx.stroke();

注意事项

一句话总结

lineTo(x, y) 就是从当前位置画一条直线到指定坐标，画完后当前位置自动更新到目标点，适合用来画直线段、折线和多边形。