p5.js 線段的用法详情 - canvas,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);
}

一條棕色線段從畫布中心出發，另一端始終跟着鼠標移動，像 “指針” 一樣追蹤鼠標位置。