如何在p5.js中填充由线条组成的形状？

在p5.js中，可以使用两种方法来填充由线条组成的形状。

方法一：使用beginShape()和endShape()函数来定义形状的边界点，并使用vertex()函数来定义每个边界点的位置。然后使用fill()函数设置填充颜色，并在beginShape()和endShape()之间使用beginContour()和endContour()函数来创建内部空洞。

示例代码如下：

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  fill(255, 0, 0); // 设置填充颜色为红色
  
  beginShape();
  vertex(100, 100);
  vertex(200, 100);
  vertex(200, 200);
  vertex(100, 200);
  endShape(CLOSE);
  
  fill(0, 0, 255); // 设置填充颜色为蓝色
  
  beginShape();
  vertex(150, 150);
  vertex(250, 150);
  vertex(250, 250);
  vertex(150, 250);
  endShape(CLOSE);
  
  fill(0, 255, 0); // 设置填充颜色为绿色
  
  beginShape();
  vertex(120, 120);
  vertex(180, 120);
  vertex(180, 180);
  vertex(120, 180);
  endShape(CLOSE);
}

方法二：使用line()函数绘制形状的边界线，然后使用loadPixels()函数获取画布的像素数据，遍历像素数据，找到形状内的像素点，然后使用set()函数设置像素点的颜色。

示例代码如下：

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  // 绘制形状的边界线
  line(100, 100, 200, 100);
  line(200, 100, 200, 200);
  line(200, 200, 100, 200);
  line(100, 200, 100, 100);
  
  // 获取画布的像素数据
  loadPixels();
  
  // 遍历像素数据
  for (let x = 0; x < width; x++) {
    for (let y = 0; y < height; y++) {
      // 判断像素点是否在形状内
      if (isInsideShape(x, y)) {
        // 设置像素点的颜色为红色
        set(x, y, color(255, 0, 0));
      }
    }
  }
  
  // 更新画布显示
  updatePixels();
}

// 判断像素点是否在形状内
function isInsideShape(x, y) {
  if (x >= 100 && x <= 200 && y >= 100 && y <= 200) {
    return true;
  } else {
    return false;
  }
}

以上是两种在p5.js中填充由线条组成的形状的方法，你可以根据实际需求选择适合的方法。如果想了解更多关于p5.js的信息，请访问腾讯云的p5.js产品介绍页面：腾讯云p5.js产品介绍。