本文详解 p5.js 中鼠标交互的核心机制，涵盖 mouseIsPressed 和 mouseButton 等关键变量，以及 mouseClicked、mousePressed 和 mouseReleased 等事件函数的用法。通过三个完整代码示例，演示如何判断按键类型、控制图形显隐，并实现基于距离检测的物体拖拽功能，帮助开发者快速掌握 Canvas 交互开发。
本文介绍 p5.js 中鼠标交互的示例，供参考学习。
鼠标交互常用关键词
一、鼠标交互常用关键词
p5.js 提供了多种用于处理鼠标操作的关键词与函数，以下是常用部分：
mouseIsPressed：布尔关键词，当鼠标按键处于按下状态时返回 true，否则为 false。
mouseButton：关键词，用于判断当前按下的是鼠标的哪个按键。
具体案例如下：
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
if (mouseIsPressed) {
textAlign(CENTER);
textSize(30);
if (mouseButton == LEFT)
text("LEFT",200,height/2);
if (mouseButton == RIGHT)
text("RIGHT",200,height/2);
if (mouseButton == CENTER)
text("CENTER",200,height/2);
}
}
当用户分别按下鼠标左键、中键或右键时，屏幕中央会显示对应的“LEFT”、“CENTER”或“RIGHT”文本。
查看效果：
http://alpha.editor.p5js.org/full/BkEcwrdUb
鼠标交互常用函数
二、鼠标交互常用函数
除了关键词，p5.js 还提供以下常用鼠标事件函数：
mouseClicked()：鼠标点击（按下并松开）时触发一次。 mousePressed()：鼠标按下瞬间触发一次。 mouseReleased()：鼠标松开瞬间触发一次。
利用这些函数可以控制图形在屏幕上的显示时机，具体案例如下：
var showEllipse=false;
var showRect=false;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
if (mouseIsPressed){
ellipse(50, height/2, 50, 50);
}
if(showEllipse){
ellipse(200, height/2, 50, 50);
}
if(showRect){
rectMode(CENTER);
rect(350,height/2,50,50);
}
}
function mouseClicked(){
showEllipse=!showEllipse;
}
function mousePressed(){
showRect=true;
}
function mouseReleased(){
showRect=false;
}
查看效果：http://alpha.editor.p5js.org/full/BkHEY8OUZ
鼠标拖拽物体实现
三、鼠标拖拽物体
结合上述关键词与函数，可以实现更复杂的功能，例如通过鼠标拖拽移动物体。
实现代码如下：
var x=200;
var y=200
var r=50;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
if(mouseIsPressed&&dist(mouseX,mouseY,x,y)<r){
x=mouseX;
y=mouseY;
}
ellipse(x,y,r,r);
}
查看效果：http://alpha.editor.p5js.org/full/SJ6gbPdLb
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。