P5.js | 属性()函数

概述

在 P5.js 中，属性()函数用于设置和获取 P5.js 的全局属性。这些属性包括画布大小、画笔颜色等。属性()函数可以在 P5.js 的任何地方调用。你可以使用属性()函数改变程序在特定方面的表现。

语法

属性(属性名称,[值]);

参数

• 属性名称： 必须，表示你想要设置或获取哪个属性。属性名称是一个字符串。P5.js 支持的属性有很多，包括：

  • width：画布的宽度
  • height：画布的高度
  • mouseX：鼠标在画布的 X 坐标
  • mouseY：鼠标在画布的 Y 坐标
  • pmouseX：上一帧鼠标在画布的 X 坐标
  • pmouseY：上一帧鼠标在画布的 Y 坐标
  • frameCount：程序的帧数
  • key：最后一个被按下的键（一个字符）
  • keyCode：最后一个被按下的键（一个整数）
  • mouseButton：鼠标最近按下的按钮

• 值： 可选，表示你想要为属性设置的值。不同的属性需要不同的值类型，比如整数、浮点数、字符串等。

返回值

• 如果只传递一个参数，表示获取该属性，该函数返回该属性的当前值。如下所示：

let myWidth = width(); //获取画布的宽度

• 如果传递两个参数，表示设置该属性，该函数没有返回值。如下所示：

width(400); //将画布宽度设置为 400

实例

function setup() {
  createCanvas(400, 400); //创建画布
  background(255); //设置背景颜色为白色
}

function draw() {
  fill(0); //设置图形颜色为黑色
  ellipse(mouseX, mouseY, 50, 50); //在鼠标位置画一个黑色的圆形
}

function mousePressed() {
  background(255); //按下鼠标清空背景
}

• 在本例中，我们设置画布大小为 400x400，并将背景颜色设置为白色。
• 同时，我们在鼠标位置画了一个黑色的圆形。每当鼠标移动时，圆形也跟着移动。
• 当鼠标点击时，我们清空了背景。

注意事项

• 一些属性不会立即生效，需要等到下一帧才会生效。
• 如果你传递的值类型不正确，属性()函数会返回一个错误。
• 在没有设置画布大小时，画布的默认宽度和高度都是 100 像素。