p5.js | 选择()函数

在p5.js中，选择函数用于选择HTML或SVG元素，以便可以对它们进行更改或操作。选择函数通常用作p5.js中其他函数的起点，例如创建画布、绘制形状以及创建文本。

语法

选择函数的语法如下所示：

select(selector, [container])

参数说明：

• selector：CSS选择器字符串，用于选择要操作的元素，例如'#id'或'.class'。
• container（可选）：要在其中查找元素的HTML元素。如果未指定，则默认为当前文档的document元素。

返回值

选择函数返回一个p5.Element对象，该对象可用于访问元素的属性和方法。如果找不到与选择器相匹配的元素，则返回null。

示例

以下是使用选择函数的示例：

function setup() {
  // 创建画布
  createCanvas(400, 400);
  
  // 选择元素并设置其样式
  let title = select('#title');
  title.style('color', 'red');
  
  // 创建文本元素并附加到容器中
  let message = createP('Hello, World!');
  message.parent(select('#container'));
}

在此示例中，我们选择了id为'title'的元素，然后设置了它的文本颜色。我们还创建了一个包含文本的HTML元素，并将其添加到id为'container'的元素中。

总结

选择函数是p5.js中一个重要的函数，它使我们能够轻松选择HTML或SVG元素，并对它们进行更改和操作。无论是创建动画、交互式应用程序还是静态图形，都可以使用选择函数来实现你的想法。