p5.js 圆（circle）的用法

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

如果你刚接触 p5.js，想知道怎么画一个圆，那 circle() 函数就是最适合的入门工具。它简单到只需要 3 个参数就能画出一个圆，甚至能轻松扩展出彩色、动画等效果。

circle()的基础语法

circle() 是 p5.js 专门用来画圆形的函数 ------ 就像现实中用圆规画圆一样，只要确定 "中心点" 和 "大小"，就能立刻画出一个标准的圆。

它可以用来：

画简单的圆形图形（比如太阳、气泡、按钮）
作为复杂图形的基础（比如组合成花朵、表情）
结合动画做出移动、缩放、变色的圆

基础语法

circle() 函数的语法非常简单，只有 3 个必须的参数：

js 复制代码

circle(x, y, d)

参数讲解

x：圆心的水平位置（可以理解为 "左右位置"，数值越大越靠右）
y：圆心的垂直位置（可以理解为 "上下位置"，数值越大越靠下）
d：圆的直径（圆的 "大小"，数值越大圆越大；直径 = 半径 ×2，比如直径 20 的圆，半径是 10）

p5.js 的坐标系

和我们平时画纸的坐标有点不一样：

画布左上角是原点（0,0）
向右移动，x 值增大；向下移动，y 值增大
比如 circle(100, 80, 50) 表示：在画布 "右 100 像素、下 80 像素" 的位置，画一个直径 50 的圆

动手试试

最最最简单的一个圆

从最基础的代码开始，画一个圆并显示在画布上。

js 复制代码

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);
}

灰色画布正中间，会出现一个黑色边框、白色填充的圆。

画多几个圆

掌握了基础画法，可以尝试画多个不同位置、大小、颜色的圆，组合出简单图形。

彩色气泡（不同位置、大小、颜色）

js 复制代码

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() 只执行一次（避免重复绘制覆盖）

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

js 复制代码

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 次），可以让圆 "动" 起来。我们还能模仿 "动画方向" 的效果（比如来回移动、反复缩放）。

来回移动的圆

这个例子里，圆会在画布中左右移动，碰到左右边缘就反向，类似 "交替往返" 的动画效果。

js 复制代码

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) 每次刷新画布，避免留下轨迹

反复缩放的圆（模拟交替大小变化）

圆的大小（直径）会从小到大、再从大到小反复变化。

js 复制代码

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 是最亮），超出范围会无效。

circle() 是 p5.js 中最直观的绘图函数之一，核心就是通过 (x, y) 确定位置，d 确定大小。从静态的单个圆，到组合图形，再到简单动画，只要掌握 "参数控制" 和 "循环更新"，就能玩出很多花样。

试着修改示例中的参数（比如颜色、速度、大小），看看会有什么变化 ------ 编程的乐趣就在于不断尝试！

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

最后推荐一个 Fabric.js 的成功案例：快图设计

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