在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产品介绍。
领取专属 10元无门槛券
手把手带您无忧上云