javascript - 在进行繁重的 JavaScript 处理时强制 HTML5 Canvas 重绘?

标签 javascript html canvas redraw

这个问题与this older one,有关但我想在开始对我的代码进行重大更改之前确保我得到了正确的答案。

我正在开发一个计算密集型 JavaScript 程序,它需要不断更新 HTML5 Canvas 中的图像以绘制动画。如现在所写,代码在一个紧密的循环中绘制动画的所有帧,而不将控制权返回给浏览器,这意味着最终显示的只是最后一帧。我很确定解决此问题的唯一方法是将动画代码拆分为更小的片段,这些片段可以通过超时事件重新调用。这个对吗?或者是否有一种方法可以强制 Canvas 在某个特定点显示其内容,即使在紧凑的 JavaScript 循环中也是如此?

最佳答案

I'm pretty sure the only way to fix this is to split the animation code into smaller pieces that can be called reentrantly through a timeout event. Is this correct?

正确的。

Javascript 是单线程的,因此在执行您的逻辑时无法发生任何其他事情。您唯一的选择是通过将您的逻辑拆分为要在超时时执行的微 block 来“模拟”线程。

关于javascript - 在进行繁重的 JavaScript 处理时强制 HTML5 Canvas 重绘?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6014429/

相关文章:

javascript - 删除和添加类到模态内容元素

html - 如何在背景图像 Sprite 上获取 'alt' 文本标签

javascript - 尝试在前置元素:上添加点击事件

javascript - 输入值属性未在搜索栏上显示全文

javascript - 如何旋转 Canvas 上下文

javascript - 颜色变化时 Canvas 形状上出现锯齿状边缘

javascript - 数据- 在 IE8 中不工作

javascript - jquery.support 来检测 JavaScript 的文件 API?