p5.js 函数 - JavaScript

简介

p5.js 是一个基于 JavaScript 的创造性编码库，用于创建图形、动画、交互式应用程序和其他图形化艺术作品。它的灵感来自于 Processing，是一个在艺术家和设计师之间非常受欢迎的编程环境。

p5.js 包含了许多内置函数，可以帮助程序员快速创建图形和交互效果。这些函数可以用于操作图形的形状、颜色、绘制图像、响应鼠标和键盘事件等等。使用这些函数，开发者可以轻松地在网页上创建有趣的视觉效果。

函数示例

以下是几个常用的 p5.js 函数示例：

createCanvas(width, height)

这个函数用于创建一个画布，指定画布的宽度和高度。你可以使用其他的绘图函数来绘制图形或在画布上添加交互。

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

function draw() {
  background(220);
  // 添加绘图代码
}

background(r, g, b)

background() 函数用于设置画布背景的颜色。你可以传递红、绿和蓝三个参数来指定颜色的 RGB 值。请注意，这些参数的值应在 0 到 255 的范围内。

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

function draw() {
  background(220, 160, 70); // 设置背景颜色为橙色
  // 添加绘图代码
}

fill(r, g, b)

fill() 函数用于设置填充形状的颜色。你可以传递红、绿和蓝三个参数来指定颜色的 RGB 值。同样，这些参数的值应在 0 到 255 的范围内。

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

function draw() {
  background(220);
  fill(150, 75, 0); // 设置填充颜色为棕色
  rect(100, 100, 200, 200); // 绘制矩形，填充颜色为棕色
}

ellipse(x, y, width, height)

ellipse() 函数用于绘制一个椭圆形状。你需要指定椭圆的中心坐标（x 和 y），以及宽度和高度。

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

function draw() {
  background(220);
  fill(0, 150, 255); // 设置填充颜色为蓝色
  ellipse(200, 200, 100, 100); // 绘制蓝色的椭圆形状
}

结论

p5.js 函数是帮助开发者快速创建图形和交互效果的强大工具。通过使用这些函数，你可以轻松地在网页上实现动画、视觉效果和交互式应用程序。以上示例只是 p5.js 函数的一小部分，更多的函数等待你去探索和使用。快来体验 p5.js 带给你的创造力吧！