0

请告诉我这里代码中的错误是什么，即使按下鼠标，我也没有获得背景颜色，当鼠标按下时，我应该得到交替的黑色和绿色功能 mousePressed() 没有执行

var on = false;

function setup() {
  createCanvas(600, 400);
}

function draw() {
  if (on) {
    if (mouseIsPressed) {
      background(0, 255, 0);
    } else {
      background(0);
    }
  }

  background(0);
  stroke(255);
  strokeWeight(4);
  noFill();

  if (mouseX > 250 && mouseX < 350 && mouseY > 150 && mouseY < 250) {
    fill(255, 0, 200);
  }

  rectMode(CENTER);
  rect(300, 200, 100, 100);

  function mousePressed() {
    if (mouseX > 250 && mouseX < 350 && mouseY > 150 && mouseY < 250) {
      on = !on;
    }
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

4

1 回答 1

1

您的代码有两个问题：

  1. mousePressed()事件处理函数是在绘图函数内部声明的，而不是全局声明的。
  2. 您总是在有时会调用的 if 块background(0) 之后background(0, 255, 0)调用，这意味着无论初始 if 块中发生了什么，背景总是黑色的。

var on = false;

function setup() {
  createCanvas(600, 400);
}

function draw() {
  if (on) {
    if (mouseIsPressed) {
      background(0, 255, 0);
    } else {
      background(0);
    }
  } else {
    background(0);
  }

  // This would re-draw the background black regardless of what happened above
  // background(0);
  stroke(255);
  strokeWeight(4);
  noFill();

  if (mouseX > 250 && mouseX < 350 && mouseY > 150 && mouseY < 250) {
    fill(255, 0, 200);
  }

  rectMode(CENTER);
  rect(300, 200, 100, 100);
}

// This used to be declared inside the draw() function. Event handlers in p5.js need to be declared globally
function mousePressed() {
  if (mouseX > 250 && mouseX < 350 && mouseY > 150 && mouseY < 250) {
    on = !on;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

于 2021-12-16T20:00:46.127 回答