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毫秒一次，问题就会消失吗？

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

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

在任何情况下，您应该等到所有要使用的图像都已加载后再绘制。使用他们的onload活动和/或$(window).load()或jQuery(document).ready等

其他一些说明：

根据画布的交互方式以及图层的工作方式，有时最好使用多个相互叠加的画布来提高性能，尤其是顶层变化很小且下面的图层经常更改时。 / LI>
如果您的背景是静态文件（如png），请将画布的CSS背景图像设置为该图像，以使绘图更容易。

HTML Canvas分层框架

1 个答案: