Javascript HTML5画布：快速绘制大量线条
我试图从头开始制作一个小的3D引擎（HTML5），只是为了体验一下，但我遇到了一个问题。该引擎目前只显示模型的边缘，这是我希望它做的，但它运行速度非常慢，与WebGL相比，WebGL显然要处理更多的问题。在帧速率下降变得明显之前，我只能显示大约4800行，即400个立方体 我认为瓶颈在于线条的绘制 我通过绘制一个立方体（查看平滑度）来测试这一点，但计算所有立方体。在出现任何延迟之前，我可以得到大约10000个立方体进行计算（不需要实际画线）。我知道通常在出现瓶颈的地方绘制屏幕 我认为将我与webGl速度区分开来的是图形卡的使用不足。我不知道画布的后端，但我猜我没有使用图形卡的任何电源 所以我想知道是否有一种更快的方法来显示这些行，或者这是我不得不接受的Javascript HTML5画布：快速绘制大量线条,javascript,html,performance,3d,html5-canvas,Javascript,Html,Performance,3d,Html5 Canvas,我试图从头开始制作一个小的3D引擎（HTML5），只是为了体验一下，但我遇到了一个问题。该引擎目前只显示模型的边缘，这是我希望它做的，但它运行速度非常慢，与WebGL相比，WebGL显然要处理更多的问题。在帧速率下降变得明显之前，我只能显示大约4800行，即400个立方体 我认为瓶颈在于线条的绘制 我通过绘制一个立方体（查看平滑度）来测试这一点，但计算所有立方体。在出现任何延迟之前，我可以得到大约10000个立方体进行计算（不需要实际画线）。我知道通常在出现瓶颈的地方绘制屏幕 我认为将我与web
另外，我不想使用任何外部API，我希望这是完整的地面了。我这样做不是为了分发它，所以性能并不重要。我只是想了解引擎是如何在最低级别的3D图形中工作和运行的。使用调试器工具来确定页面是否经常被重新计算，并缩小问题的范围（），我不完全知道你的意思。问题来自
ctx.beginPath（）ctx.moveTo（vert1.drawx，vert1.drawy）ctx.lineTo（vert2.drawx，vert2.drawy）ctx.stroke（）绘制时间过长。开发人员工具可以帮助您确定绘制时间过长的原因-测试计时并确定页面在呈现线条时尝试执行的操作。例如，如果您的页面正在进行大量recalc样式或类似的计算，请尝试将它们批处理在一起。查看一些关于优化和调试ui更新的#perfmatter对话您是否为每行使用单独的beginPath？您可以在一个beginPath/stroke中执行多个moveTo+lineTo以获得更好的性能。@markE这就是问题所在，现在速度要快得多。5000个立方体和非常小的滞后！谢谢：D