点赞 + 关注 + 收藏 = 学会了
在 p5.js 中，arc() 函数用于绘制圆弧，它是创建各种圆形图形和动画的基础。圆弧本质上是椭圆的一部分，由中心点、宽度、高度、起始角度和结束角度等参数定义。通过灵活运用 arc() 函数可以轻松创建饼图、仪表盘、时钟等常见 UI 组件，以及各种创意图形效果。
arc() 的基础语法
基础语法
arc() 函数的完整语法如下：
arc(x, y, w, h, start, stop, [mode], [detail])
核心参数解释：
-
x, y：圆弧所在椭圆的中心点坐标
-
w, h：椭圆的宽度和高度，如果两者相等，则绘制的是圆形的一部分
-
start, stop：圆弧的起始角度和结束角度，默认以弧度（radians）为单位
可选参数：
角度单位与转换
在 p5.js 中，角度可以使用弧度或角度两种单位表示：
两种单位之间的转换关系：
-
360 度 = 2π 弧度
-
180 度 = π 弧度
-
90 度 = π/2 弧度
p5.js 提供了两个辅助函数用于单位转换：
举个例子（基础示例）
举个例子讲解一下如何使用 arc() 函数绘制不同角度的圆弧。
function setup() {
createCanvas(400, 400);
angleMode(DEGREES); // 使用角度单位
}
function draw() {
background(220);
// 绘制不同角度的圆弧
arc(100, 100, 100, 100, 0, 90); // 90度圆弧
arc(250, 100, 100, 100, 0, 180); // 180度圆弧
arc(100, 250, 100, 100, 0, 270); // 270度圆弧
arc(250, 250, 100, 100, 0, 360); // 360度圆弧（整圆）
}
这段代码会在画布上绘制四个不同角度的圆弧，从 90 度到 360 度不等。注意，当角度为 360 度时，实际上绘制的是一个完整的圆形。
三种圆弧模式：OPEN、CHORD 与 PIE
arc() 函数的第七个参数mode决定了圆弧的填充方式，有三种可选值：
-
OPEN（默认值）：仅绘制圆弧本身，不填充任何区域
-
CHORD：绘制圆弧并连接两端点形成闭合的半圆形区域
-
PIE：绘制圆弧并连接两端点与中心点形成闭合的扇形区域
这三种模式不需要手动定义，p5.js 已经在全局范围内定义好了这些常量。
举个例子：
function setup() {
createCanvas(400, 200);
angleMode(DEGREES);
}
function draw() {
background(220);
// 绘制不同模式的圆弧
arc(100, 100, 100, 100, 0, 270, OPEN);
arc(220, 100, 100, 100, 0, 270, CHORD);
arc(340, 100, 100, 100, 0, 270, PIE);
}
这段代码会在画布上绘制三个 270 度的圆弧，分别展示 OPEN、CHORD 和 PIE 三种模式的效果。可以明显看到，OPEN 模式只绘制弧线，CHORD 模式连接两端点形成闭合区域，而 PIE 模式则从两端点连接到中心点形成扇形。
如何选择合适的模式
选择圆弧模式时，应考虑以下因素：
-
视觉效果需求：需要纯弧线效果时选择 OPEN，需要闭合区域时选择 CHORD 或 PIE
-
应用场景：饼图通常使用 PIE 模式，仪表盘可能使用 CHORD 模式，而简单装饰线条可能使用 OPEN 模式
-
填充与描边需求：不同模式对填充和描边的处理方式不同，需要根据设计需求选择
值得注意的是，arc() 函数绘制的默认是填充的扇形区域。如果想要获取纯圆弧（没有填充区域），可以使用 noFill() 函数拒绝 arc() 函数的填充。
做几个小demo玩玩
简易数字时钟
在这个示例中，我将使用 arc() 函数创建一个简单的数字时钟，显示当前的小时、分钟和秒数。
let hours, minutes, seconds;
function setup() {
createCanvas(400, 400);
angleMode(DEGREES); // 使用角度单位
}
function draw() {
background(220);
// 获取当前时间
let now = new Date();
hours = now.getHours();
minutes = now.getMinutes();
seconds = now.getSeconds();
// 绘制时钟边框
stroke(0);
strokeWeight(2);
noFill();
arc(width/2, height/2, 300, 300, 0, 360);
// 绘制小时刻度
strokeWeight(2);
for (let i = 0; i < 12; i++) {
let angle = 90 - i * 30;
let x1 = width/2 + 140 * cos(radians(angle));
let y1 = height/2 + 140 * sin(radians(angle));
let x2 = width/2 + 160 * cos(radians(angle));
let y2 = height/2 + 160 * sin(radians(angle));
line(x1, y1, x2, y2);
}
// 绘制分钟刻度
strokeWeight(1);
for (let i = 0; i < 60; i++) {
let angle = 90 - i * 6;
let x1 = width/2 + 150 * cos(radians(angle));
let y1 = height/2 + 150 * sin(radians(angle));
let x2 = width/2 + 160 * cos(radians(angle));
let y2 = height/2 + 160 * sin(radians(angle));
line(x1, y1, x2, y2);
}
// 绘制小时指针
let hourAngle = 90 - (hours % 12) * 30 - minutes * 0.5;
let hourLength = 80;
let hx = width/2 + hourLength * cos(radians(hourAngle));
let hy = height/2 + hourLength * sin(radians(hourAngle));
line(width/2, height/2, hx, hy);
// 绘制分钟指针
let minuteAngle = 90 - minutes * 6;
let minuteLength = 120;
let mx = width/2 + minuteLength * cos(radians(minuteAngle));
let my = height/2 + minuteLength * sin(radians(minuteAngle));
line(width/2, height/2, mx, my);
// 绘制秒针
stroke(255, 0, 0);
let secondAngle = 90 - seconds * 6;
let secondLength = 140;
let sx = width/2 + secondLength * cos(radians(secondAngle));
let sy = height/2 + secondLength * sin(radians(secondAngle));
line(width/2, height/2, sx, sy);
// 显示当前时间文本
noStroke();
fill(0);
textSize(24);
text(hours + ":" + nf(minutes, 2, 0) + ":" + nf(seconds, 2, 0), 50, 50);
}
关键点解析：
-
获取当前时间：使用Date()对象获取当前的小时、分钟和秒数
-
角度计算：根据时间值计算指针的旋转角度，注意将角度转换为 p5.js 使用的坐标系（0 度指向正上方）
-
刻度绘制：使用循环绘制小时和分钟刻度，每个小时刻度间隔 30 度，每个分钟刻度间隔 6 度
-
指针绘制：根据计算的角度和长度绘制小时、分钟和秒针，注意秒针使用红色以区分
-
时间文本显示：使用text()函数在画布左上角显示当前时间
饼图
在这个示例中，我将创建一个简单的饼图，展示不同类别数据的比例。
let data = [30, 10, 45, 35, 60, 38, 75, 67]; // 示例数据
let total = 0;
let lastAngle = 0;
function setup() {
createCanvas(720, 400);
angleMode(DEGREES); // 使用角度单位
noStroke(); // 不绘制边框
total = data.reduce((a, b) => a + b, 0); // 计算数据总和
}
function draw() {
background(100);
pieChart(300, data); // 调用饼图绘制函数
}
function pieChart(diameter, data) {
lastAngle = 0; // 重置起始角度
for (let i = 0; i < data.length; i++) {
// 设置圆弧的灰度值，map函数将数据映射到0-255的灰度范围
let gray = map(i, 0, data.length, 0, 255);
fill(gray);
// 计算当前数据点的角度范围
let startAngle = lastAngle;
let endAngle = lastAngle + (data[i] / total) * 360;
// 绘制圆弧
arc(
width / 2,
height / 2,
diameter,
diameter,
startAngle,
endAngle,
PIE // 使用PIE模式创建扇形
);
lastAngle = endAngle; // 更新起始角度为下一个数据点做准备
}
}
关键点解析：
-
数据准备：定义示例数据数组data，并计算数据总和total
-
颜色设置：使用map()函数将数据索引映射到 0-255 的灰度范围，实现渐变效果
-
角度计算：根据每个数据点的值与总和的比例计算对应的角度范围
-
圆弧绘制：使用PIE模式绘制每个数据点对应的扇形，形成完整的饼图
这个饼图示例可以通过添加标签、交互效果或动态数据更新来进一步增强功能。
描边效果
在 p5.js 中，我们可以通过以下函数定制圆弧的描边效果：
-
stroke(color)：设置描边颜色
-
strokeWeight(weight)：设置描边宽度
-
strokeCap(cap)：设置描边端点样式（可选值：BUTT, ROUND, SQUARE）
-
strokeJoin(join)：设置描边转角样式（可选值：MITER, ROUND, BEVEL）
以下示例展示了如何定制圆弧的描边效果：
function setup() {
createCanvas(400, 200);
angleMode(DEGREES);
}
function draw() {
background(220);
// 示例1：粗红色描边
stroke(255, 0, 0);
strokeWeight(10);
arc(100, 100, 100, 100, 0, 270);
// 示例2：带圆角端点的描边
stroke(0, 255, 0);
strokeWeight(10);
strokeCap(ROUND);
arc(220, 100, 100, 100, 0, 270);
// 示例3：带阴影效果的描边
stroke(0, 0, 255);
strokeWeight(15);
strokeCap(SQUARE);
arc(340, 100, 100, 100, 0, 270);
// 恢复默认设置
noStroke();
}
关键点解析：
-
颜色设置：使用stroke()函数设置不同颜色的描边
-
宽度设置：使用strokeWeight()函数调整描边粗细
-
端点样式：使用strokeCap()函数设置描边端点的样式（圆角效果特别适合圆弧）
-
阴影效果：通过增加描边宽度并偏移绘制位置可以创建简单的阴影效果
填充效果
在 p5.js 中，我们可以通过以下函数定制圆弧的填充效果：
以下示例展示了如何定制圆弧的填充效果：
function setup() {
createCanvas(400, 200);
angleMode(DEGREES);
colorMode(HSB, 360, 100, 100); // 使用HSB颜色模式
}
function draw() {
background(220);
// 示例1：单色填充
fill(120, 100, 100); // 绿色
arc(100, 100, 100, 100, 0, 270);
// 示例2：渐变填充
noFill();
stroke(0, 0, 100);
strokeWeight(10);
for (let i = 0; i < 360; i += 10) {
fill(i, 100, 100);
arc(220, 100, 100, 100, i, i+10);
}
// 示例3：透明填充
fill(240, 100, 100, 50); // 半透明蓝色
arc(340, 100, 100, 100, 0, 270);
// 恢复默认设置
noFill();
stroke();
}
关键点解析：
-
颜色模式：使用colorMode()函数切换到 HSB 模式，方便创建渐变效果
-
单色填充：直接使用fill()函数设置单一填充颜色
-
渐变填充：通过循环绘制多个小角度的圆弧，每个使用不同的色相值实现渐变效果
-
透明度设置：在fill()函数中添加第四个参数（0-100）设置透明度
旋转圆弧
在 p5.js 中创建圆弧动画非常简单，主要通过以下方法实现：
-
**draw()**函数：每秒自动执行约 60 次，用于更新动画帧
-
变量控制：使用变量控制圆弧的参数（如位置、大小、角度等）
-
frameRate(fps)：设置动画帧率（可选）
-
millis()：获取当前时间（毫秒），用于精确控制动画时间
圆弧动画效果示例：
let angle = 0;
function setup() {
createCanvas(400, 400);
angleMode(DEGREES);
}
function draw() {
background(220);
// 绘制旋转的红色圆弧
stroke(255, 0, 0);
strokeWeight(10);
arc(width/2, height/2, 300, 300, angle, angle + 90);
// 更新角度值，实现旋转效果
angle += 2; // 调整这个值可以改变旋转速度
// 恢复默认设置
noStroke();
}
关键点解析：
-
角度变量：使用 angle 变量控制圆弧的起始角度
-
角度更新：在每次 draw() 调用时增加angle值，实现旋转效果
-
速度控制：通过调整每次增加的角度值（这里是 2 度）控制旋转速度
弧度与角度的转换技巧
在 p5.js 中，arc()函数默认使用弧度作为角度单位，但我们通常更习惯使用角度。以下是一些转换技巧：
-
角度转弧度：使用 radians(degrees) 函数将角度转换为弧度
-
弧度转角度：使用 degrees(radians) 函数将弧度转换为角度
-
设置角度单位：使用 angleMode(DEGREES) 函数将全局角度单位设置为角度，这样 arc() 函数就可以直接使用角度值
-
常见角度值：记住一些常用角度的弧度值，如 90 度 = PI/2，180 度 = PI，270 度 = 3PI/2，360 度 = 2PI
圆弧绘制的常见问题与解决方案
在使用 arc() 函数时，可能会遇到以下问题：
-
arc () 函数中的 bug：当 start_angle == end_angle 时，可能会出现意外绘制效果。例如，当 start_angle == end_angle == -PI/2 时会绘制一个半圆，这不符合预期。解决方案是避免 start_angle 和 end_angle 相等。
-
起始角度的位置：在 p5.js 中，0 弧度（或 0 度，如果使用 angleMode(DEGREES)）指向正右方（3 点钟方向），而不是数学上的正上方。这可能导致方向与预期不符。
-
描边宽度的影响：较宽的描边会使圆弧看起来比实际大。这是因为描边会向路径的两侧扩展。如果需要精确控制大小，可以考虑将arc()的尺寸适当减小，或者使用 shapeMode() 函数调整坐标系。
-
浮点精度问题：在进行角度计算时，尤其是涉及到除法和循环时，可能会遇到浮点精度问题。建议使用 nf() 函数（如 nf(value, 2, 0) ）来格式化显示的数值，避免显示过多的小数位。
以上就是本文的全部内容啦，如果想了解更多 p5.js 的玩法可以关注 《P5.js中文教程》
点赞 + 关注 + 收藏 = 学会了
登录
