javascript - 执行功能5秒钟

我正在尝试在p5.js中创建一个加载栏，其中的顶部像YouTube加载栏一样位于顶部。

像这样

var x = 0;
function setup() {
  createCanvas(400, 400);
    x = width;
}
function draw() {
  background(220);
    stroke(255,0,0);
    strokeWeight(10);
    line(0,0,x,0);
}

我想使用map()函数来减少行的宽度。

map(x, width , 0 , second(),second()+5);

Working Example

注意：使用p5.js库

最佳答案

首先，不应使x等于width。它应从0开始，然后仅根据时间进行更新。

其次，second()返回当前时间的实际秒数，因此在这种情况下不好。最好使用millis()返回项目启动后的毫秒数。

最后，您错误地使用了map参数（或者至少我不理解您要对传递它们的顺序进行的操作）

x = map(millis(), 0, 5000, 0 , width);

上面的代码将毫秒范围0 - 5000（0到5秒）映射到画布的0 - width。



为了能够随时初始化条形，请使用一个变量作为值范围的开始/结束值。

var x,
    startAt;

function setup() {
  createCanvas(400, 400);
  startAt = millis();
}

function draw() {
  background(220);
  stroke(255, 0, 0);
  strokeWeight(10);

  x = map(millis(), startAt, startAt + 5000, 0, width);
  line(0, 0, x, 0);
}

function mouseClicked() {
  startAt = millis();
}

在此示例中，每当您单击时，该栏将重新启动。

http://alpha.editor.p5js.org/gpetrioli/sketches/SyibBz_ff上的工作示例

关于javascript - 执行功能5秒钟，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47910247/