p5.js 圆（circle）的用法

王妍芳 · 昨天 14:19

点赞 + 关注 + 收藏 = 学会了
如果你刚接触 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 是最亮），超出范围会无效。

circle() 是 p5.js 中最直观的绘图函数之一，核心就是通过 (x, y) 确定位置，d 确定大小。从静态的单个圆，到组合图形，再到简单动画，只要掌握 “参数控制” 和 “循环更新”，就能玩出很多花样。
试着修改示例中的参数（比如颜色、速度、大小），看看会有什么变化 —— 编程的乐趣就在于不断尝试！
以上就是本文的全部内容啦，想了解更多 P5.js 用法欢迎关注《P5.js中文教程》。
最后推荐一个 Fabric.js 的成功案例：快图设计
点赞 + 关注 + 收藏 = 学会了

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

账号		自动登录	找回密码
密码			立即注册