p5js鼠标悬浮交互显示
时间: 2023-09-16 08:08:03 浏览: 44
在p5js中,可以使用mouseX和mouseY变量来获取鼠标的位置。结合createCanvas()函数和mouseMoved()事件,可以实现鼠标悬浮交互显示。
示例代码如下:
```javascript
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
// 判断鼠标是否在矩形内
if (mouseX > 100 && mouseX < 300 && mouseY > 100 && mouseY < 300) {
fill(255, 0, 0);
rect(100, 100, 200, 200);
// 显示文本
fill(255);
textSize(20);
textAlign(CENTER);
text("鼠标悬浮在矩形内", width/2, height/2);
} else {
fill(0, 255, 0);
rect(100, 100, 200, 200);
}
}
function mouseMoved() {
// 鼠标移动时重绘画布
redraw();
}
```
在以上代码中,我们创建了一个400x400像素的画布,并在画布中心绘制了一个矩形。当鼠标移动到矩形内时,矩形的颜色变为红色,并在画布中心显示文本“鼠标悬浮在矩形内”。当鼠标移出矩形时,矩形的颜色变为绿色。
通过mouseMoved()事件,我们可以实现鼠标移动时重绘画布,从而实时检测鼠标位置并作出响应。