文章/答案/技术大牛

发布

社区首页 >问答首页 >执行一个函数5秒

问执行一个函数5秒
EN

Stack Overflow用户

提问于 2017-12-20 16:13:26

回答 1查看 543关注 0票数 0

我试图在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);

工作实例

注意事项：使用p5.js库

javascript

processing

p5.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-12-20 16:57:00

首先，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();
}

在本例中，无论何时单击，将重新启动条形图。

ff的工作示例

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/47910247

复制

相似问题

问执行一个函数5秒
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问执行一个函数5秒EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问执行一个函数5秒
EN