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

Drawing on lots of canvas elements without losing responsiveness

本文关键字：布元素元素绘制失去响应情况下更新时间：2023-09-26

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

我需要关于如何解决以下两个问题的建议

1)我想显示画布一旦它完全绘制。我不希望用户在15个画布元素上等待绘图完成。

2)我想让页面响应，而计算正在发生

谢谢你的建议。我解决了显而易见的问题。Javascript是单线程的，我一个接一个地在画布上作画，没有任何间隙。这使得浏览器忙于计算坐标，并且只有在所有计算完成后才更新页面。为了解决这个问题，我创建了一个函数，一次只能在一个画布上绘图。这个函数反过来使用setTimeout在250毫秒后调用自己。这样，浏览器就可以在两个连续的画布绘图之间获得时间，以更新最近绘制的画布。