在不失去响应性的情况下绘制大量的画布元素

Question

我一个接一个地绘制了很多画布元素。这些功能在计算上很昂贵。如果有15个画布元素，则在完成所有画布绘制之前，页面不会显示任何内容。这导致人们在浏览器上收到有关脚本执行时间过长的消息。此外，在此过程中页面仍然没有响应。

我想就如何解决以下2个问题提出建议 -

1）我想在完全绘制画布后立即显示画布。我不希望用户等待绘图完成15个画布元素。

2）我想在计算发生时使页面响应。

Answer 1

感谢您的建议。我发现了明显的问题。 Javascript是单线程的，我一个接一个地画在我的画布上，没有任何差距。这使浏览器忙于计算坐标，并且仅在所有计算发生后才更新页面。为了解决这个问题，我创建了一个一次只在一个画布上绘制的函数。该函数依次使用setTimeout在250 ms后调用自身。这样浏览器就可以在两个连续的画布图之间获得时间来更新最近绘制的画布。该页面也以这种方式保持响应。