p5.js 圓（circle）的用法详情 - canvas 德育處主任日志

點贊 + 關注 + 收藏 = 學會了

如果你剛接觸 p5.js，想知道怎麼畫一個圓，那 circle() 函數就是最適合的入門工具。它簡單到只需要 3 個參數就能畫出一個圓，甚至能輕鬆擴展出彩色、動畫等效果。

circle()的基礎語法

circle() 是 p5.js 專門用來畫圓形的函數 —— 就像現實中用圓規畫圓一樣，只要確定 “中心點” 和 “大小”，就能立刻畫出一個標準的圓。

它可以用來：

畫簡單的圓形圖形（比如太陽、氣泡、按鈕）
作為複雜圖形的基礎（比如組合成花朵、表情）
結合動畫做出移動、縮放、變色的圓

基礎語法

circle() 函數的語法非常簡單，只有 3 個必須的參數：

circle(x, y, d)

參數講解

x：圓心的水平位置（可以理解為 “左右位置”，數值越大越靠右）
y：圓心的垂直位置（可以理解為 “上下位置”，數值越大越靠下）
d：圓的直徑（圓的 “大小”，數值越大圓越大；直徑 = 半徑 ×2，比如直徑 20 的圓，半徑是 10）

p5.js 的座標系

和我們平時畫紙的座標有點不一樣：

畫布左上角是原點（0,0）
向右移動，x 值增大；向下移動，y 值增大
比如 circle(100, 80, 50) 表示：在畫布 “右 100 像素、下 80 像素” 的位置，畫一個直徑 50 的圓

動手試試

最最最簡單的一個圓

從最基礎的代碼開始，畫一個圓並顯示在畫布上。

function setup() {
  // 創建一個400×400像素的畫布
  createCanvas(400, 400);
  // 給畫布設置灰色背景（數值0-255，0是黑，255是白）
  background(220);
}

function draw() {
  // 在畫布中心畫一個直徑100的圓
  // 畫布中心座標是（200,200），因為400/2=200
  circle(200, 200, 100);
}

灰色畫布正中間，會出現一個黑色邊框、白色填充的圓。

畫多幾個圓

掌握了基礎畫法，可以嘗試畫多個不同位置、大小、顏色的圓，組合出簡單圖形。

彩色氣泡（不同位置、大小、顏色）

function setup() {
  createCanvas(400, 400);
  background(135, 206, 235); // 淺藍色背景（像天空）
}

function draw() {
  // 取消重複繪製（只畫一次）
  noLoop();
  
  // 畫第一個圓：紅色，位置(100,150)，直徑80
  fill(255, 99, 71); // 填充紅色（RGB顏色：紅255,綠99,藍71）
  noStroke(); // 去掉邊框
  circle(100, 150, 80);
  
  // 畫第二個圓：黃色，位置(200,200)，直徑120
  fill(255, 215, 0); // 填充金黃色
  circle(200, 200, 120);
  
  // 畫第三個圓：紫色，位置(300,100)，直徑60
  fill(138, 43, 226); // 填充紫色
  circle(300, 100, 60);
}

關鍵函數説明

fill(r, g, b)：設置圓的填充顏色（RGB 值，0-255）
noStroke()：去掉圓的邊框（默認有黑色邊框）
noLoop()：讓 draw() 只執行一次（避免重複繪製覆蓋）

同心圓（同一中心，不同大小）

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

function draw() {
  noLoop();
  let centerX = 200; // 圓心x
  let centerY = 200; // 圓心y
  
  // 最外層圓：直徑200，灰色邊框
  stroke(200); // 邊框顏色
  strokeWeight(3); // 邊框粗細
  noFill(); // 不填充
  circle(centerX, centerY, 200);
  
  // 中間圓：直徑150，灰色邊框
  circle(centerX, centerY, 150);
  
  // 內層圓：直徑100，灰色邊框
  circle(centerX, centerY, 100);
  
  // 中心小圓：直徑20，黑色填充
  fill(0);
  noStroke();
  circle(centerX, centerY, 20);
}

白色背景上會出現 3 個同心的灰色圓環，中心有一個黑色小圓，像靶子一樣。

簡單動畫

圓本身是靜態的，但結合 p5.js 的 draw() 函數（每秒自動執行 60 次），可以讓圓 “動” 起來。我們還能模仿 “動畫方向” 的效果（比如來回移動、反覆縮放）。

來回移動的圓

這個例子裏，圓會在畫布中左右移動，碰到左右邊緣就反向，類似 “交替往返” 的動畫效果。

let x = 50; // 圓的初始x座標
let speed = 3; // 移動速度

function setup() {
  createCanvas(400, 200);
}

function draw() {
  background(220); // 每次刷新畫布（清除上一幀）
  
  // 畫圓：y固定在100，直徑60
  fill(70, 130, 180); // 鋼藍色
  noStroke();
  circle(x, 100, 60);
  
  // 更新x座標（移動）
  x = x + speed;
  
  // 碰到左右邊緣時反向（模擬 alternate 方向）
  // 左邊緣：x小於直徑的一半（圓左邊不超出畫布）
  // 右邊緣：x大於畫布寬度 - 直徑的一半（圓右邊不超出畫布）
  if (x < 30 || x > 400 - 30) {
    speed = -speed; // 反轉速度方向
  }
}

動畫原理：

用 x 變量記錄圓的水平位置，speed 控制移動速度
每次 draw() 執行時，x 增加 speed（圓向右移動）
當圓碰到左邊緣（x < 30）或右邊緣（x > 370），speed 變負（反向移動）
background(220) 每次刷新畫布，避免留下軌跡

反覆縮放的圓（模擬交替大小變化）

圓的大小（直徑）會從小到大、再從大到小反覆變化。

let d = 50; // 初始直徑
let scaleSpeed = 2; // 縮放速度

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(255);
  
  // 畫圓：固定在中心
  fill(255, 165, 0); // 橙色
  noStroke();
  circle(200, 200, d);
  
  // 更新直徑（縮放）
  d = d + scaleSpeed;
  
  // 碰到大小邊界時反向縮放
  if (d > 300 || d < 20) {
    scaleSpeed = -scaleSpeed; // 反轉縮放方向
  }
}

橙色的圓會在中心反覆變大、變小，最小直徑 20，最大 300。

注意事項

直徑和半徑的區別：circle() 的第三個參數是 “直徑”（穿過圓心的直線長度），不是半徑。如果想按半徑畫圓，記得把半徑 ×2（比如半徑 30，直徑就是 60）。
座標別搞反：p5.js 中 y 軸向下為正（和數學座標系相反），所以 y=50 比 y=100 更靠上。
動畫要清畫布：做動畫時，必須在 draw() 里加 background()，否則圓會留下 “拖影”（上一幀的圓不會被清除）。
顏色值範圍：fill() 和 stroke() 的 RGB 值都是 0-255（0 是最暗，255 是最亮），超出範圍會無效。