canvas, html5

интернет программирование JavaScript html5 canvas

При рисовании нескольких элементов с разными паттернами для заливки в одном теге <canvas>, периодически не подгружаются все изображения. Таким образом рисунок получается частичным, хотя функция отрисовки вызывается в onLoad, если запустить ещё раз через консоль браузера, в 95% случаев всё прорисовывается без проблем. Это связано именно с тем, что подгрузка изображений с сервера не происходит?

Примечание:
Спасибо за ответ, непременно сделаю прелоадер, но оказалось всё проще - после некоторых тестов я поняла, что всё загружается, только загрузка идёт не в том порядке, что прописан в коде, в связи с чем шло перекрытие частей рисунка.

Примечание:
хаха, не повисайте :)

img.onload() конечно использовался, в общем лучше код напишу, чем словами:

function drawFooter() {
var footer = document.getElementById("canvas-footer");
if (footer.getContext) {
var footerContext = footer.getContext("2d");
var MainFooterimageObj = new Image();
MainFooterimageObj.src = "images/bg-red2.gif";
MainFooterimageObj.onload = function() {
var MainFooterPattern = footerContext.createPattern(MainFooterimageObj, "repeat");
/* рисую фон */
};

var DarkFooterimageObj = new Image();
DarkFooterimageObj.src = "images/bg-red3.gif";
DarkFooterimageObj.onload = function() {
var DarkFooterPattern = footerContext.createPattern(DarkFooterimageObj, "repeat");

/* рисую части поменьше, которые должны быть сверху */
};

var LightFooterimageObj = new Image();
LightFooterimageObj.src = "images/bg-red4.gif";
LightFooterimageObj.onload = function() {
var LightFooterPattern = footerContext.createPattern(LightFooterimageObj, "repeat");
/* рисую самый маленькие части */
};
}
}

Из кода видно, что мы рисуем все части после загрузки конкретного фона, а значит если загружается первым делом LightFooterimageObj, то он отрисуется первым, из-за чего после прорисовки двух других частей, у нас не будет видно самую маленькую. Как вы сами, наверное, догадались, я всего лишь перенесла куски кода по отрисовке маленьких частей внутрь первой, сохраняя иерархию.

Да, ваш ответ единственный, так что пусть он и будет лучшим :)
Ответы:
Скорее всего да.
Гугли preload img. Я где-то встречал варианты с callback'ом без использования аякса.
Именно для таких случаев во всех спрайтовых игрушках на канвасе в самом начале показывается заставка и пишется "Please wait... loading"


12 лет назад

RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.

Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.

Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.