p5.js 圆（circle）的用法

德育处主任

发布于 2026-06-06 10:54:23

190

文章被收录于专栏：前端数据可视化前端数据可视化

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

如果你刚接触 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 是最亮），超出范围会无效。