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

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

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

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

```javascript

function setup() {

createCanvas(400, 400);

}

function draw() {

background(220);

rect(100, 100, 200, 200);

}

```

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

設(shè)置描邊顏色

要設(shè)置矩形的描邊顏色，我們可以使用`stroke()`函數(shù)。該函數(shù)接受一個(gè)參數(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ù)接受一個(gè)參數(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);

}

```

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

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