首先，我們需要打開一個在線編輯器，如p5.js的官方網(wǎng)站或其他支持p5.js的在線平臺。這樣我們可以直接在瀏覽器中編寫和運(yùn)行我們的代碼。創(chuàng)建一個矩形作為示范在p5.js中，我們可以使用`createC

首先，我們需要打開一個在線編輯器，如p5.js的官方網(wǎng)站或其他支持p5.js的在線平臺。這樣我們可以直接在瀏覽器中編寫和運(yùn)行我們的代碼。

創(chuàng)建一個矩形作為示范

在p5.js中，我們可以使用`createCanvas()`函數(shù)來創(chuàng)建一個畫布，并使用`rect()`函數(shù)來繪制一個矩形。

```javascript

function setup() {

createCanvas(400, 400);

}

function draw() {

background(220);

rect(100, 100, 200, 200);

}

```

以上代碼將創(chuàng)建一個400x400像素大小的畫布，并在坐標(biāo)(100, 100)處繪制一個長為200像素、寬為200像素的矩形。

設(shè)置描邊顏色

要設(shè)置矩形的描邊顏色，我們可以使用`stroke()`函數(shù)。該函數(shù)接受一個參數(shù)，用于指定描邊的顏色。

```javascript

function setup() {

createCanvas(400, 400);

}

function draw() {

background(220);

stroke(255, 0, 0); // 將描邊顏色設(shè)置為紅色

rect(100, 100, 200, 200);

}

```

以上代碼將矩形的描邊顏色設(shè)置為紅色。

設(shè)置填充顏色

要設(shè)置矩形的填充顏色，我們可以使用`fill()`函數(shù)。該函數(shù)接受一個參數(shù)，用于指定填充的顏色。

```javascript

function setup() {

createCanvas(400, 400);

}

function draw() {

background(220);

fill(0, 255, 0); // 將填充顏色設(shè)置為綠色

rect(100, 100, 200, 200);

}

```

以上代碼將矩形的填充顏色設(shè)置為綠色。

取消描邊

如果我們想要取消矩形的描邊，可以使用`noStroke()`函數(shù)。

```javascript

function setup() {

createCanvas(400, 400);

}

function draw() {

background(220);

noStroke(); // 取消描邊

rect(100, 100, 200, 200);

}

```

以上代碼將矩形的描邊取消。

取消填充

如果我們想要取消矩形的填充，可以使用`noFill()`函數(shù)。

```javascript

function setup() {

createCanvas(400, 400);

}

function draw() {

background(220);

noFill(); // 取消填充

rect(100, 100, 200, 200);

}

```

以上代碼將矩形的填充取消。

通過使用p5.js中的描邊和填充函數(shù)，我們可以輕松地為圖形添加顏色和樣式，從而創(chuàng)建出更加有吸引力的可視化效果。