Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.10.2012, 16:13
Новичок на форуме
Отправить личное сообщение для sunAirway Посмотреть профиль Найти все сообщения от sunAirway
 
Регистрация: 02.10.2012
Сообщений: 3

Canvas, проблемы с отрисовкой изображений
Для рисования готового изображения используется 3 паттерна для заливки, всё это собрано в одну функцию:
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"); 

            footerContext.fillStyle = MainFooterPattern;
            footerContext.fillRect (0, 23, 940, 205);        
        };  
        
        var DarkFooterimageObj = new Image();
        DarkFooterimageObj.src = "images/bg-red3.gif";
        DarkFooterimageObj.onload = function() {
            var DarkFooterPattern = footerContext.createPattern(DarkFooterimageObj, "repeat");
                              
            footerContext.fillStyle = DarkFooterPattern;
            footerContext.fillRect (24, 70, 453, 148);
            footerContext.fillStyle = DarkFooterPattern;
            footerContext.fillRect (498, 70, 229, 148);
            footerContext.fillStyle = DarkFooterPattern;
            footerContext.fillRect (748, 70, 168, 60);
        };
                
        var LightFooterimageObj = new Image();
        LightFooterimageObj.src = "images/bg-red4.gif";
        LightFooterimageObj.onload = function() {
            var LightFooterPattern = footerContext.createPattern(LightFooterimageObj, "repeat");
            footerContext.beginPath();
            footerContext.moveTo(0, 23);
            footerContext.bezierCurveTo(0, 23, 30, 11, 60, 0);
            footerContext.bezierCurveTo(60, 0, 400, 0, 880, 0);
            footerContext.bezierCurveTo(880, 0, 905, 10, 940, 23);
            footerContext.bezierCurveTo(940, 23, 400, 23, 0, 23);

            footerContext.closePath();
            footerContext.fillStyle = LightFooterPattern;
            footerContext.fill();  
            
            footerContext.fillStyle = LightFooterPattern;
            footerContext.fillRect (53, 86, 410, 118); 
            footerContext.fillRect (512, 86, 200, 118);
        };      
    }
}


Периодически возникают проблемы или с подгрузкой изображений или ещё с чем-то, но в общем-то эффект такой - фоновое изображение, которое MainFooterimageObj отрисовывается, а два других нет, при повторном вызове функции drawFooter() через консоль браузера, в 95% случаев всё становится как надо.

Сталкивался ли кто-нибудь с этим? Может у кого-нибудь есть идеи по оптимизации?
Ответить с цитированием
  #2 (permalink)  
Старый 02.10.2012, 16:33
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,588

патерны создаются асинхронно по мере загрузки изображений. код по загрузке начинает выполняться а патерна ещё нет. последовательно делать , или проверять существует патерн или нет .
а в том что при повторном вызове-ничего удивительного-изображения уже закешированы
Ответить с цитированием
  #3 (permalink)  
Старый 02.10.2012, 17:37
Новичок на форуме
Отправить личное сообщение для sunAirway Посмотреть профиль Найти все сообщения от sunAirway
 
Регистрация: 02.10.2012
Сообщений: 3

Сообщение от dmitriymar
последовательно делать , или проверять существует патерн или нет .
что вы имеете ввиду под последовательностью? ведь я создаю паттерн, когда картинка загрузилась, а под проверкой вы понимаете проверку создание паттерна и повторный вызов этого куска кода при отсутствии?

Сообщение от dmitriymar
а в том что при повторном вызове-ничего удивительного-изображения уже закешированы
я вас немного дезинформировала, сейчас заметила что сначала отрисовался футер, после обновления страницы, тёмная часть исчезла.
Ответить с цитированием
  #4 (permalink)  
Старый 02.10.2012, 18:10
Новичок на форуме
Отправить личное сообщение для sunAirway Посмотреть профиль Найти все сообщения от sunAirway
 
Регистрация: 02.10.2012
Сообщений: 3

Кажется, я поняла вашу мысль о последовательности, после того, как нашла причину "неотрисовки". На самом деле всё было ок, просто картинки загружаются не в том порядке, в котором они прописаны в коде(что и следовало ожидать), а значит, то что раньше загрузилось, то и отрисовалось в первую очередь, в связи с чем идёт перекрытие и нам просто не видно самых маленьких частей.
Решила это путём вложенности кода, спасибо за то, что натолкнули на эту мысль.
Ответить с цитированием
  #5 (permalink)  
Старый 07.01.2016, 22:21
Новичок на форуме
Отправить личное сообщение для impfromliga Посмотреть профиль Найти все сообщения от impfromliga
 
Регистрация: 07.01.2016
Сообщений: 1

Это не ошибка, а следствие многопоточности браузера!
Сообщение от sunAirway Посмотреть сообщение
Периодически возникают проблемы или с подгрузкой изображений

Самое противное в этой особенности, что она может в 95% не проявляться.

Дело в том, что загрузка ресурсов браузером производиться в отдельных от JS потоках! И генерация onload может успеть "сработать" еще до того, как обработчик поставлен (если вы ставите его ниже).

Точный момент срабатывания Image.onload в браузерах может быть разным, на всякий случай ВСЕГДА
//назначайте сначала обработчик:
LightFooterimageObj.onload = function() {/*...*/}
//а только потом загрузку:
LightFooterimageObj.src = "images/bg-red4.gif";

Последний раз редактировалось impfromliga, 07.01.2016 в 22:22. Причина: уточнение
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблемы с Canvas Verhal Общие вопросы Javascript 1 24.01.2012 21:51
html5 Canvas как кэш для изображений JAre Элементы интерфейса 6 20.07.2011 03:22
Проблемы с картой изображений mmolib Events/DOM/Window 0 06.12.2010 20:34
Проблемы с картой изображений mmolib Events/DOM/Window 0 06.12.2010 20:34
глюк форума Gvozd Сайт Javascript.ru 11 18.03.2009 14:37