p5.js createGraphics() 函数

createGraphics() 函数是 p5.js 库中一个非常有用的函数，它允许我们创建一个用于绘制的 "画布"，类似于 HTML5 中的 <canvas> 元素。使用 createGraphics() 函数，我们可以在画布中创建图形、图像、文本等，并进行颜色处理，最终将这些元素渲染到主画布之上。

语法

createGraphics(width, height, renderer)

• width：绘制画布的宽度。
• height：绘制画布的高度。
• renderer：渲染器类型，可选参数，默认为 p2d。可以是 p2d（2D）或 webgl（3D）。

使用方式

首先，我们需要使用 createCanvas() 函数创建一个主画布，createGraphics() 函数创建一个要在其上绘制的图形。

let canvas;
let graphics;

function setup() {
  canvas = createCanvas(500, 400);
  graphics = createGraphics(500, 400);
}

接下来，我们可以在 graphics 对象上绘制一些图形、图像等等。以下是一个简单示例：

function draw() {
  graphics.fill(255, 0, 0);
  graphics.ellipse(250, 200, 50, 50);
  graphics.stroke(255);
  graphics.line(0, 0, 500, 400);
}

最后，我们可以使用 image() 函数将 graphics 对象渲染到主画布上。

function draw() {
  // 绘制图形到 graphics 对象上
  graphics.fill(255, 0, 0);
  graphics.ellipse(250, 200, 50, 50);
  graphics.stroke(255);
  graphics.line(0, 0, 500, 400);
  
  // 渲染 graphics 对象到主画布上
  image(graphics, 0, 0);
}

需要注意的是，如果您的 createGraphics() 函数的渲染器类型为 webgl，那么您需要在 setup() 函数中添加以下一行代码：

angleMode(DEGREES);

这里的 angleMode() 函数用于设置角度模式，因为 webgl 不支持 p5.js 默认的角度模式（弧度制）。此行代码必须在创建 graphics 对象之前调用。

优点

使用 createGraphics() 函数有以下一些优点：

• 您可以创建多个绘图画布，以允许单独地绘制一组元素。
• 您可以以其他的画布，文本或形状的形式访问您的 p5 开发悬浮窗口。
• 您可以将渲染的对象复制到位图或文件进行导出。

结论

createGraphics() 函数是一个非常有用的工具，它允许我们创建一个单独的绘制画布，并在其上绘制图形、图像和文本，最终通过 image() 函数将其渲染到主画布上。它提供了多种灵活的方式来进行处理，让您能够创建一些非常炫酷的效果，对于那些对设计有兴趣的程序员来说，这无疑是一个非常不错的工具。