HTML Canvas 分层框架

Question

我正在使用 HTML 5 canvas 标签构建一个应用程序，到目前为止效果很好。该应用程序的下一步是分层，这样我就有了一个背景图像，并在其之上添加了一些图层。现在我正在这样做：

this.drawMarkers = function(markers) {
    selectedImage = null;
    map.width = map.width;
    for(var i in markers) {
        for(var j in markers[i]) {
            var holder = markers[i][j];
            if(holder !== null) {
                var marker = new Marker(new Cell(holder.row, holder.column), holder.type);
                marker.src = holder.src;
                marker.draw();
            }
        }
    }
    initGrid();
}

其中i是层，j是该层上的东西。最初的代码只是将所有内容绘制在一层上，并且效果很好，如果所有内容都按正确的顺序下载，这一层也可以。如果没有，事情就会错误地堆叠。例如，如果背景很大并且最后下载，则由于所有内容都是异步的，因此最终会清除其上的所有内容。

是否有任何框架可以向画布添加分层以避免这种情况？如果事情没有按正确的顺序加载，只要保留堆叠，我就可以了。

Answer 1

首先要问自己一个问题：

如果你重复绘制它，比如每 100 毫秒绘制一次，问题会消失吗？

如果不是，则“以错误的顺序绘制”是您正在做的事情，而不是异步错误。我怀疑情况可能是这样。

图像可能无法绘制，但假设您的绘制例程是正确的并且您每次都重新绘制所有内容，则任何内容都不应以错误的顺序绘制。根据画布规范，如果未加载图像，对drawImage的调用不会执行任何操作，因此除非是您自己的调用顺序，否则错误的堆叠应该是不可能的。

无论如何，您应该等到所有要使用的图像都已加载后再进行绘制。使用它们的 onload 事件和/或 $(window).load() 或 jQuery(document).ready 等。

其他一些注意事项：

• 取决于画布的交互方式以及图层的工作方式，有时最好使用多个画布堆叠在一起以提高性能，特别是当顶层变化很小而下面的层经常变化时。
• 如果您的背景是静态文件（例如 png），请将画布的 CSS 背景图像设置为该图像，以便您自己更轻松地进行绘图。