javascript - JavaScript的“更新”功能，类似于p5.js？

我使用p5.js来制作一些想法的原型，但是由于p5.js并未真正使用实际的HTML绘制内容（据我所知，它使用的是画布），因此它不包含可选文本之类的内容。我要实现的效果将不断变化（DOM元素的CSS会不断变化），有没有办法使我能够在每个“框架”中更改CSS函数，类似于p5的更新函数.js？

最佳答案

坚持p5

如果您愿意使用p5，则可以坚持使用。这是文档中有关style()函数功能的演示：

https://p5js.org/reference/#/p5.Element/style

您会注意到它使用了另一个p5函数createDiv()来创建html div（您可以更改其内容），我认为它本身就是JavaScript createElement的包装。

https://p5js.org/reference/#/p5/createDiv

在我开始学习新知识之前，总是值得搜索已经使用的库的文档。

如果p5绝对不是您想要的方式（也许您没有使用其80％的功能），那么我会在评论中提到另外两条路线。

requestAnimationFrame

requestAnimationFrame将与屏幕的刷新率和计算机的处理器同步，以创建尽可能平滑的动画。如果您希望动画看起来超级平滑，这对于许多动画很有用。

function animationFunction(){

  // Put your logic here:

  // this makes the function repeat again
  requestAnimationFrame(animationFunction);
}

// this "kicks it off"
requestAnimationFrame(animationFunction);

setInterval

设置间隔接受一个函数作为第一个参数，并接受毫秒数作为第二个参数，因此，对于要显式设置“帧”之间的时间间隔的参数，此方法更好。

let numberOfMillisecondsBetweenEachFrame = 300;

setInterval(function(){
  // Put your logic here
}, numberOfMillisecondsBetweenEachFrame);

这是这两种方法的示例：

https://codepen.io/EightArmsHQ/pen/KKdNJRx

关于javascript - JavaScript的“更新”功能，类似于p5.js？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/61354324/