我目前有一个p5js草图，其中包含一个按钮，说开始绘图。我设置了它，以便在画布上悬停时发生绘图，但是，我不希望在用户按下按钮开始绘图之前开始此交互。我该如何使绘图只在按下按钮后才开始呢?
var canvas;
var button;
function windowResized() {
console.log('resized');
resizeCanvas(windowWidth, windowHeight);
}
function setup () {
canvas = createCanvas(windowWidth, windowHeight);
canvas.position(0,0);
canvas.style('z-index', '-1')
background(175);
button = createButton("Start Your Drawing");
button.mousePressed(draw);
}
function drawLine() {
strokeWeight(4);
line(pmouseX, pmouseY, mouseX, mouseY)
}
function draw () {
// strokeWeight(4);
// console.log('button')
// line(pmouseX, pmouseY, mouseX, mouseY)
}
enter code here
当你点击"开始绘图"时，你总是可以给人一种游戏开始的错觉。
setup函数在p5.js中首先且仅调用一次，因此让我们编写代码来定义这里的画布。我添加了一个新的gameStarted标志，当玩家点击"开始绘图"时，它被设置为true。按钮。在draw()中，我们只在游戏开始时将画布设置为我们想要的颜色。
let gameStarted = false;
function setup() {
button = createButton("Start Your Drawing");
button.mousePressed(() => gameStarted = true);
canvas = createCanvas(windowWidth, windowHeight);
canvas.position(0,0);
canvas.style('z-index', '-1')
background(255);
}
function draw() {
if (gameStarted) {
background(220);
}
}html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>