p5.js | ellipse()函数

在p5.js中，ellipse()函数用来画椭圆或圆形。它可以接受两个参数，分别是椭圆或圆形的中心点的坐标和椭圆或圆形的直径。如果只传递一个参数，则默认此参数为直径。

用法示例

画一个圆形

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

function draw() {
  background(220);
  ellipse(200, 200, 100);
}

在这个例子中，我们在画布的中心画了一个半径为50的圆形。

画一个椭圆

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

function draw() {
  background(220);
  ellipse(200, 200, 100, 50);
}

在这个例子中，我们在画布的中心画了一个在横轴上半径为50，在纵轴上半径为25的椭圆。

画一个随机大小和位置的圆形

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

function draw() {
  background(220);
  let diameter = random(50, 100);
  let xPos = random(width);
  let yPos = random(height);
  ellipse(xPos, yPos, diameter);
}

在这个例子中，我们使用了p5.js库中的random()函数来生成一个在50到100之间的随机数，并使用这个数来表示圆形的直径。我们还使用random()函数来生成随机的x和y坐标来表示圆形的中心点的位置。

参数

x

椭圆或圆形的中心点的x坐标

y

椭圆或圆形的中心点的y坐标

w

椭圆或圆形的直径或长轴的长度

h

椭圆或圆形的短轴的长度

其他参数设置

除了以上参数之外，还可以设置椭圆或圆形的边框粗细、颜色和填充颜色，具体设置方法如下：

边框粗细设置

使用如下代码可以设置椭圆或圆形的边框粗细：

strokeWeight(2);

在这个例子中，我们设置椭圆或圆形的边框为2像素。

边框颜色设置

使用如下代码可以设置椭圆或圆形的边框颜色：

stroke(255, 0, 0);

在这个例子中，我们将椭圆或圆形的边框颜色设置为红色。stroke()函数中的三个参数分别为红、绿、蓝三原色的值，介于0-255之间。

填充颜色设置

使用如下代码可以设置椭圆或圆形的填充颜色：

fill(0, 255, 0);

在这个例子中，我们将椭圆或圆形的填充颜色设置为绿色。fill()函数中的三个参数分别为红、绿、蓝三原色的值，介于0-255之间。

结论

ellipse()函数是p5.js中非常常用的函数之一，它可以用来画圆形、椭圆以及其他类似形状。

在任何使用这个函数时都要注意传递的参数顺序，以及其含义，这样才能画出我们想要的图形。同时，这个函数还可以使用其他函数来设置字体和颜色等参数，让我们的图形更加丰富和有趣。