p5.js 线段的用法

线段是最基础的图形元素，就像画画时的 “线条”—— 用它可以勾勒轮廓、连接形状，甚至组合出复杂的图案。p5.js 的 line() 函数能轻松画出线段，语法比原生 Canvas 要好理解多了。

认识 line ()：线段的 “绘图指令”

什么是 line ()？

line() 是 p5.js 中用于绘制线段的函数，作用就像用直尺在两点之间画一条直线。它是最基础的绘图工具之一，也是组合复杂图形的 “积木”—— 比如画正方形需要 4 条线段，画三角形需要 3 条线段。

核心语法：4 个参数画一条线

在 2D 模式下，line() 只需要 4 个参数就能画一条线段：

line(x1, y1, x2, y2)

参数解释

• x1, y1：线段起点的坐标（比如 “从画布左边 100 像素、上边 50 像素的位置开始”）
• x2, y2：线段终点的坐标（比如 “到画布左边 200 像素、上边 150 像素的位置结束”）

举个例子：line(50, 30, 200, 100) 会画出一条从 (50,30) 到 (200,100) 的线段。

线段的 “特性”

• 线段没有 “填充色”：fill() 函数对线段无效（线段只有轮廓，没有内部）。
• 样式靠这两个函数：用 stroke(颜色) 设线段颜色，strokeWeight(粗细) 设线段宽度。
• 3D 模式可选：如果想画 3D 线段，需要用 6 个参数（x1,y1,z1,x2,y2,z2），入门阶段先掌握 2D 即可。

第一条线段

从最简单的例子开始，感受 line() 的用法，再逐步添加样式。

基础线段绘制

function setup() {
  createCanvas(400, 300); // 创建400×300的画布
  background(240); // 浅灰色背景
}

function draw() {
  // 画一条从左上角到右下角的线段
  line(50, 50, 350, 250);
}

浅灰色画布上，会出现一条默认黑色、细线条的线段，从 (50,50) 斜着延伸到 (350,250)。起点 (50,50) 是画布左上方的位置，终点 (350,250) 是右下方的位置，线段自然斜向右下方。

给线段 “换衣服”（设置样式）

线段默认是黑色细线条，用 stroke() 和 strokeWeight() 可以改变它的 “外观”：

function setup() {
  createCanvas(400, 300);
  background(240);
  noLoop(); // 只画一次，不重复刷新
}

function draw() {
  // 1. 红色粗线段（宽度5像素）
  stroke(255, 0, 0); // 红色（RGB值）
  strokeWeight(5); // 线段粗细5像素
  line(50, 80, 350, 80); // 水平线段（y坐标相同）

  // 2. 蓝色中等粗细线段（宽度3像素）
  stroke(0, 0, 255); // 蓝色
  strokeWeight(3);
  line(50, 140, 350, 140);

  // 3. 绿色细线段（宽度1像素，默认）
  stroke(0, 255, 0); // 绿色
  strokeWeight(1);
  line(50, 200, 350, 200);
}

三条水平线段从上到下排列，分别是红色粗线、蓝色中线、绿色细线，清晰展示样式差异。

• stroke(r, g, b)：通过 RGB 颜色值设置线段颜色（0-255，比如纯红是 (255,0,0)）
• strokeWeight(数值)：数值越大，线段越粗（默认 1 像素）
• 水平线段的秘诀：起点和终点的 y 坐标相同（比如都是 80），x 坐标不同

用线段组合简单图形

线段的真正力量在于 “组合”—— 几条线段能拼出矩形、三角形等基础图形：

function setup() {
  createCanvas(400, 300);
  background(255); // 白色背景
  noLoop();
}

function draw() {
  stroke(0); // 黑色线段
  strokeWeight(2);

  // 1. 画三角形（3条线段）
  line(100, 100, 180, 200); // 左边
  line(180, 200, 20, 200); // 底边
  line(20, 200, 100, 100); // 右边
  text("三角形（3条线段）", 40, 240);

  // 2. 画矩形（4条线段）
  line(220, 100, 350, 100); // 上边
  line(350, 100, 350, 200); // 右边
  line(350, 200, 220, 200); // 下边
  line(220, 200, 220, 100); // 左边
  text("矩形（4条线段）", 240, 240);
}

白色画布上，左边是三角形，右边是矩形，都是用黑色线段拼出的轮廓。

• 三角形：3 条线段首尾相连（A→B，B→C，C→A）
• 矩形：4 条线段，相邻边垂直（上边水平，右边垂直）

线段的动态效果

线段不仅能画静态图形，结合 draw() 函数的自动刷新（每秒 60 次），还能做出动态效果 —— 比如移动的线条、跟随鼠标的线条。

跟随鼠标的 “追踪线”

让线段的一端固定，另一端跟随鼠标移动，形成实时追踪效果：

function setup() {
  createCanvas(400, 300);
  background(240);
}

function draw() {
  background(240); // 每次刷新画布，清除上一帧轨迹
  stroke(139, 69, 19); // 棕色线段
  strokeWeight(3);

  // 线段起点固定在(200,150)，终点是鼠标位置
  line(200, 150, mouseX, mouseY);

  // 显示提示文字
  fill(0);
  noStroke(); // 文字无轮廓
  text("移动鼠标试试", 20, 20);
}

一条棕色线段从画布中心出发，另一端始终跟着鼠标移动，像 “指针” 一样追踪鼠标位置。

• mouseX 和 mouseY 是 p5.js 的内置变量，实时获取鼠标的 x、y 坐标
• background(240) 每次刷新画布，避免留下之前的线段轨迹
• 线段的终点随鼠标坐标变化，形成动态效果

以上就是本文的全部内容啦，想了解更多 P5.js 用法欢迎关注 《P5.js中文教程》。

也可以➕我 green bubble 吹吹水咯

点赞 + 关注 + 收藏 = 学会了

本作品采用《CC 协议》，转载必须注明作者和本文链接