P5.js | imageMode()函数

在p5.js中，imageMode()函数用于控制图像的显示模式。通过调用该函数，您可以控制p5.js图像在画布上的显示方式。

语法

imageMode(mode)

• mode（可选）：字符串类型的参数，表示您想要使用的图像显示模式。它可以是以下值之一：
  • CORNER: 左上角对齐的模式。
  • CORNERS: 对角线对齐模式。
  • CENTER: 居中对齐模式。
  • RADIUS: 基于图像中心的半径对齐模式。
  • CORNER: 默认的左上角对齐模式。

示例

示例1：CORNER模式

在以下示例中，我们将在左上角将图像显示在画布上：

let img;

function preload() {
  img = loadImage('image.jpg');
}

function setup() {
  createCanvas(400, 400);
  imageMode(CORNER);
  image(img, 0, 0);
}

示例2: CENTER模式

在以下示例中，我们将图像居中对齐并显示在画布上：

let img;

function preload() {
  img = loadImage('image.jpg');
}

function setup() {
  createCanvas(400, 400);
  imageMode(CENTER);
  image(img, width/2, height/2);
}

示例3: RADIUS模式

在以下示例中，我们将调整图像的显示到画布中心，并以图像半径对齐：

let img;

function preload() {
  img = loadImage('image.jpg');
}

function setup() {
  createCanvas(400, 400);
  imageMode(RADIUS);
  image(img, width/2, height/2, 100, 100);
}

注意事项

• 在p5.js中，设置imageMode()函数将影响之后所有的image()函数调用。
• 请确保在加载图像之前调用imageMode()函数，否则它将不会生效。

参考链接：https://p5js.org/reference/#/p5/imageMode