p5.js keyPressed()用法及代码示例

每当按键时，都会调用keyPressed()函数。最新输入的ASCII key 存储在“ key”变量中，但是不能区分大小写字符。非ASCII字符代码及其相应名称可以在“ keyCode”变量中访问。

按住一个键可能会导致多个keyPressed()调用。这是由于操作系统如何处理按键并取决于计算机的配置方式。浏览器可能将自己的默认行为附加到各种键上。可以通过在方法末尾添加“return false”来防止这种情况。

用法:

keyPressed()

参数：此方法不接受任何参数。

以下示例说明了p5.js中的keyPressed()函数：

范例1：

function setup() { 
  createCanvas(600, 200); 
  textSize(20); 
  text("Press any key to display it "
          + "on the screen", 10, 20); 
} 
  
function keyPressed() { 
  clear(); 
  textSize(20); 
  text("Press any key to display it "
          + "on the screen", 10, 20); 
  textSize(100); 
  text(key, 100, 150); 
}

输出：
display-pressed

范例2：

let opac = 128; 
  
function setup() { 
  createCanvas(700, 200); 
  background(0, 128, 0, opac); 
  textSize(22); 
  text("Press the left and right arrow"
        + " keys to change the opacity"
        + " of the color.", 10, 20); 
} 
  
function keyPressed() { 
  clear(); 
  
  textSize(50); 
  text("Pressing:" + key, 100, 150); 
  
  // Reduce opacity if the left arrow is pressed 
  if (key == "ArrowLeft" && opac > 0) 
    opac -= 20; 
  // Increase opacity if the left arrow is pressed 
  else if (key == "ArrowRight" && opac < 255) 
    opac += 20; 
  
  // Set the new background color 
  background(0, 128, 0, opac); 
  
  textSize(22); 
  text("Press the left and right arrow"
        + " keys to change the opacity"
        + " of the color.", 10, 20); 
}

输出：
change-opacity

在线编辑： https://editor.p5js.org/

环境设置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

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

相关用法

注：本文由纯净天空筛选整理自sayantanm19大神的英文原创作品 p5.js | keyPressed() Function。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。