Javascript 设置数据散点图的动画

（我是html5新手……所以请使用小词）

我正在尝试制作一些数据的散点图（点随时间移动）

现在，我有一系列具有特定坐标的context.arc（），可以创建动画的一个“帧”

我最初的想法是使用一种类似于动画gif的策略：创建一个帧序列，然后按顺序打印它们，中间有一些延迟

这是一个可行的方法吗？如果是，我应该如何延迟渲染？我最初的阅读表明没有真正的睡眠功能，所以我想知道这个策略是否不好

（另外，任何指向为scatterplot创建html5标记而不是我的低级编码的软件的点都将非常好）

---

谢谢

因为

画布

元素是由JavaScript填充的，您可以使用

setTimeout

或

setInterval

函数来获取有关JavaScript计时器的更多帮助。这将允许您在预定的时间量之后绘制每个帧。但是，像SVG这样面向对象的语言可能更合适，因此您可以移动元素，而不是在它们上面绘制；大多数宣传自己与HTML5兼容的浏览器都应该有合理的支持。

这是我的想法。但是，这似乎不起作用：函数circle（）{context.beginPath（）；}函数frame1（）{circle（.1.2）；圆（.6.7）；}函数frame2（）{circle（.3.8）；圆（.8.2）；}setTimeout（“frame1（）”，3000）；setTimeout（“frame2（）”，3000）；但框架1（）；框架2（）；是的。@topepo这是因为

setTimeout（frame1（）…）

和

setTimeout（frame2（）…）

都是同时被调用的-每当该代码块执行时，都会有三秒的延迟。尝试将调用第二帧的延迟更改为3020毫秒，假设您希望动画以50fps的速度运行。谢谢。我很明智地使用了chrome及其调试器。这个问题似乎是在使用setTimeout（“frame1（）”，3000）时“未捕获引用错误：未定义frame1”。但是，用frame1（）替换它确实会产生圆，所以我很困惑。@topepo也许你的问题与此有关。如果您有嵌入式函数，则它们可能会从窗口中隐藏。否则，你包含的代码片段对我来说也很好…宾果。我将我的定义从“function frame1（）{”改为“frame1=function（）{”，一切都很好。谢谢你的帮助。