HTML5 Canvas 不保留绘制顺序

Question

我正在尝试在画布上绘制建筑物的粗略轮廓。 我通过为每一侧创建一系列正方形以及顶部的“屋顶”来实现下面的效果，然后基本上按照 Painter 算法按顺序绘制它们。

左侧的屏幕截图显示了它的外观。这是单独绘制每个正方形。

为了提高性能，我希望尽可能少的 .stroke() 和 .fill() 调用，因此我将所有 moveTo() 和 lineTo() 调用排队并一次性绘制它们。 测试表明（至少对于线路而言）这会带来巨大的性能提升，我自己也进行了验证。

不幸的是，正如您从右侧的屏幕截图中看到的那样，当我在最后只画一次建筑物时，分层基本上被破坏了。它以看似随机的顺序绘制事物。

画布应该以这种方式工作吗？为什么它不按照我告诉它绘制的顺序绘制所有内容，就像第一个屏幕截图一样？ 有没有人知道解决这种行为的好方法？

Answer 1

如果您将所有 moveTos 和 lineTos 等作为一大批发送，它会像渲染一个大形状一样绘制它们（您希望看到所有内部笔划）。

运行多个绘制操作会带来轻微的性能损失，但通常不值得让您的代码更难理解和调试。