我正在尝试构建一个简单的应用程序，当您在屏幕上按下/单击时它会播放一首歌曲。一旦您按下/单击，涟漪效应就会发生，同时也会产生视觉效果。
每次按下/单击时都会发生涟漪，但在我的代码中(每次单击都会重新启动)，您按下并发生涟漪，但不会一直循环。我知道答案就在我嘴边，但我想不通。此外，当我的草图加载时，会出现一个紫色框，我不确定为什么。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="resources\p5.js"></script>
<script src="resources\p5.dom.js"></script>
<script src="resources\p5.sound.js"></script>
<script type="text/javascript" src="js\app.js"></script>
<link rel="stylesheet" href="css\style.css">
<title>Breathe</title>
</head>
<body>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
let outerDiam = 0;
let cnv;
let drawThings;
function centerCanvas() {
var x = (windowWidth - width) / 2;
var y = (windowHeight - height) / 2;
cnv.position(x, y);
}
function setup() {
cnv = createCanvas(600, 600);
centerCanvas();
background(255, 0, 255);
}
function windowResized() {
centerCanvas();
}
function draw() {
if (drawThings) {
background(255);
for (let i = 0; i < 5; i++){
let diam = outerDiam - 30 * i;
if (diam > 0){
let fade = map(diam, 0, width, 0, 255);
stroke(fade);
noFill();
ellipse(300, 300, diam);
}
outerDiam = outerDiam + 2;
}
}
}
function mousePressed() {
drawThings = !drawThings;
}
最佳答案
在您的 mousePressed 函数中，您从未真正重置动画，您只是切换播放。
function mousePressed() {
drawThings = !drawThings;
}
当您单击时它再次开始播放时，动画会从中断处继续播放。
不要在单击时关闭绘图，而是将 outerDiam 重置为 0。
所以这个:
function draw() {
if (drawThings) {
[...]
}
function mousePressed() {
drawThings = !drawThings;
}
变成这样:
function draw() {
[...]
}
function mousePressed() {
outerDiam = 0;
}
“紫色框”也是由于背景在开始时设置为紫色而创建的:
function setup() {
[...]
background(255, 0, 255); //red is 255, green is 0 and blue is 255 so it appears purple
}
当您开始使用 draw() 中的背景函数绘制时，这会被覆盖，但是在您提供的代码中，背景会一直保持这种颜色，直到您单击，因为 drawThings 没有定义为开头和仅在您第一次单击时变为 true。
如果您进行了我上面建议的更改，那么 setup() 中的这个背景将立即被覆盖，因此您根本不会看到紫色背景。 (我建议删除设置函数中的第一个后台函数。)
关于javascript - p5js 中 mousePressed 的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58522737/