p5.js 专注于变量

p5.js 中的focused变量用于检查当前窗口或草图是否处于焦点状态。当草图处于焦点时，焦点变量将具有真值，否则将为假。它类似于 CSS 中的 focus 属性。在 p5.js 中，此变量仅提供有关主窗口或草图的信息。如果用户更改选项卡或单击检查窗口，它会将变量设置为 false。

语法：

focused

下面的程序说明了 p5.js 中的焦点变量：

示例 1：

Javascript

let img;
  
function preload(){
  img = loadImage("gfg.png");
}
  
function setup() {
  createCanvas(400, 400);
}
  
function draw() {
  background('green');
  
  image(img, width/2 - img.width/2,
        height/2 - img.height/2);
  
  // Check if the sketch is currently
  // not focused
  if (!focused) {
    
      // Draw lines if the sketch 
    // is not focused
    stroke(200, 0, 0);
    line(0, 0, height, height);
    line(height, 0, 0, height);
  }
}

输出：

• 当草图聚焦时。

  

• 当草图没有聚焦时。

  

示例 2：

Javascript

let cylinder;
function preload() {
  
  // Load the model
  cylinder = loadModel('/cylinder.stl', true);
}
  
function setup() {
  
  createCanvas(400, 400, WEBGL);
}
  
function draw() {
  background('green');
  
  // Rotate the model
  rotateX(90);
    
  // Check if the sketch is
  // not focused
  if (!focused) {
      
    // Use stroke of red color
    stroke(200, 0, 0);
  } else {
    // Else use stroke of black color
    stroke(0);
  }
  
  // Display the model
  model(cylinder);
}

输出：

• 当草图聚焦时。

  

• 当草图没有聚焦时。

  

参考： https://p5js.org/reference/#/p5/focused