p5.js | 绘制()函数

在p5.js中，绘制()函数是最常用的函数之一。它是一个特殊的函数，p5.js在程序开始运行后，会不断地循环调用它。这就是为什么所有的绘图都必须放在绘制()函数中。

使用绘制()函数

在你的p5.js程序中，你需要定义一个绘制()函数。这个函数中的代码会不停地循环，直到程序结束或调用noLoop为止。 下面是一个基本的p5.js程序：

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

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

在这个程序中，我们定义了一个setup()函数来创建画布，之后定义了draw()函数用于在画布上绘制圆形。在draw()中，我们使用background()函数来清空画布并设置背景色为灰色。之后使用ellipse()函数来绘制一个圆形。这个圆形的位置是在画布中心，大小为50x50像素。

你可以在draw()函数中使用不同的绘图函数，例如rect()、line()和text()等。你也可以使用p5.js提供的图形库，例如p5js-svg和p5.js-scribble。

控制绘制()函数的帧率

默认情况下，p5.js会以每秒60帧的速度调用draw()函数。如果你想调整帧率，可以使用frameRate()函数，例如：

function setup() {
  createCanvas(400, 400);
  frameRate(30); // 设置帧率为每秒30帧
}

总结

绘制()函数是p5.js中最重要的函数之一。所有的绘图必须放在绘制()函数中，并且这个函数会不停地循环调用。掌握绘制()函数的使用，是学习p5.js的重要一步。