p5.js | 隐藏()函数

在p5.js中，利用hide()函数可以隐藏一个元素，包括画布和所有其他元素。本文将介绍hide()函数的用法，以及它的一些使用技巧。

hide()函数的用法

函数原型为：

hide()

调用该函数后，当前元素将立即被隐藏。此时元素可能仍然存在于页面上，但它的可见性为隐藏状态。

该函数不接受任何参数。

使用示例

下面是一个示例程序，利用hide()函数在画布被点击时隐藏它：

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

function draw() {
}

function mouseClicked() {
  hide();
}

在这个程序中，当画布被点击时，就会调用hide()函数，从而隐藏画布。

使用技巧

元素的显示和隐藏

在p5.js中，利用show()函数可以将一个元素显示出来。

show()

function mouseClicked() {
  hide();
  setTimeout(show, 2000);
}

该程序中，当画布被点击时，画布会被隐藏，等待2秒后再显示出来。

切换元素的可见性

可以利用条件语句切换元素的可见性：

if(isVisible) {
  hide();
} else {
  show();
}
isVisible = !isVisible;

该程序中，每次调用时isVisible的值将翻转。如果isVisible为true，那么当前元素将被隐藏；否则元素将被显示。

设置元素的透明度

可利用color()函数设置元素的透明度。颜色值的格式为：

color(red, green, blue, alpha)

alpha参数指定透明度，取值介于0和255之间。

function setup() {
  createCanvas(400, 400);
  strokeWeight(6);
  stroke(0);
}

function draw() {
  // 画一个正方形
  rect(50, 50, 100, 100);
}

function mouseClicked() {
  stroke(255, 0, 0, 100);
  rect(50, 50, 100, 100);
}

在这个程序中，当画布被点击时，正方形变成了红色半透明。这是因为stroke()函数的第4个参数设置了透明度。

结语

通过hide()函数，你可以隐藏p5.js中的任何元素。了解了hide()函数的用法和一些使用技巧后，相信你可以更加方便地在p5.js中工作。