如何在P5.js中为多个圆形添加各自的线性渐变

P5.js无法通过普通fill()直接实现渐变填充，需要为每个圆形单独创建线性渐变对象，再将其作为填充样式应用。以下是修改后的示例代码，每个圆形都配有专属线性渐变：

function setup() {
    createCanvas(400, 400);
    noLoop(); // 生成静态画面
}

function draw() {
    background(color(0,0,0));
    noStroke();

    // 第一个圆形：水平线性渐变（亮黄到浅黄）
    let grad1 = createLinearGradient(20, 30, 40, 30);
    grad1.addColorStop(0, color(255,255,0));
    grad1.addColorStop(1, color(255,255,100));
    fill(grad1);
    circle(30, 30, 20);

    // 第二个圆形：垂直线性渐变（鲜红到暗红）
    let grad2 = createLinearGradient(100, 80, 100, 160);
    grad2.addColorStop(0, color(255,0,0));
    grad2.addColorStop(1, color(150,0,0));
    fill(grad2);
    circle(100, 120, 80);

    // 第三个圆形：对角线性渐变（深紫到粉紫）
    let grad3 = createLinearGradient(295, 255, 345, 305);
    grad3.addColorStop(0, color(255,0,255));
    grad3.addColorStop(1, color(255,100,255));
    fill(grad3);
    circle(320, 280, 50);
}

关键说明 #

• createLinearGradient(x1, y1, x2, y2)：定义渐变的起止坐标，坐标基于画布全局，需根据圆形的位置和尺寸调整（比如第一个圆的圆心在(30,30)、半径10，渐变起点设为(30-10,30)、终点设为(30+10,30)，保证渐变覆盖整个圆形）
• addColorStop(stop, color)：添加渐变的颜色节点，stop取值范围0到1，0对应起点颜色，1对应终点颜色，可添加多个节点实现多色渐变
• 每个圆形需单独创建渐变对象，避免填充样式相互覆盖

内容的提问来源于stack exchange，提问作者public9nf