HTML-фреймворки для холста

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 и что вы каждый раз перерисовываете все. Согласно спецификации canvas, вызов drawImage ничего не делает, если изображение не загружено, поэтому неправильная укладка должна быть невозможна, если это не порядок ваших собственных вызовов.

В любом случае вам следует подождать, пока все изображения, которые вы собираетесь использовать, загрузятся, прежде чем вы начнете рисовать. Используйте их события загрузки и / или $(window).load() или jQuery(document).ready и т. Д.

Некоторые другие заметки:

• В зависимости от того, насколько интерактивен ваш холст и как работают слои, иногда лучше использовать несколько полотен, уложенных друг на друга, для повышения производительности, особенно если верхний слой изменяется очень мало, а нижний слой меняется часто.
• Если ваш фон представляет собой статический файл, такой как png, установите CSS-фоновое изображение холста для этого изображения, чтобы облегчить рисование для себя.