如何等待画布完成重新渲染?

时间:2018-08-22 04:30:10

标签: canvas promise html5-canvas settimeout synchronous

我有一个renderText()函数,该函数用文本(ctx.fillText(char, charLocation, 400))填充画布。我希望它呈现文本,暂停2秒钟,然后呈现新文本。

解决方法:

renderText();
setTimeout(() => {
    renderNewText();
}, 2000);

此解决方案目前尚可,但是如果我想将其减少到0.1秒,并且renderText()花费超过0.1秒才能执行,导致renderNewText()renderText()之前执行,该怎么办? ?我可以确定如何等到renderText()fillText完成后再暂停多少时间,我想暂停一下吗?

我所知道的:我知道canvascontext完全同步渲染;这样,renderText()不会返回任何promise,并且即使退出renderText()之后,在上下文中调用的所有方法仍会继续。而且,至少根据我已阅读的所有注释和线程,没有任何事件可以指示完成的时间。在我查看过Stack Overflow的所有解决方案中,答案几乎都是“您不能”,但我很难相信。

我确定肯定有一些我真的没有到达这里,可能是事件循环或Promises或其他东西。

1 个答案:

答案 0 :(得分:0)

来自@towc的comment

  

画布api调用确实是异步的,但它们已排队,因此   订单被保留。要了解更多信息,请阅读活动   环。如果您有比赛条件,那就在其他地方