Javascript.RU

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

Скорость рендера в canvas
Все приветы.
Для отрисовки картинок создаю теги img и храню все данные об элементе в одном массиве. Ускорит ли работу если хранить это в теге канваса, или можно как то по лучше сохранить картинку что бы потом ее можно было быстро использовать в канвасе.

для тех кому нужен код:

функция перевода объекта анимации с записыванием в массив
function createNewEventObject(nameObject, nameEvent, Event) {
		
		var elem = arrayObject[nameObject][nameEvent];
		
		//Запись параметров перемещения объекта
		for (var o in Event) {
			
			if (typeof Event[o] == 'object' && Event[o] != null) {
				
				elem[o] = new Object();
				
				//Если значение является объектом тогда проходимся циклом по нему
				for (var a in Event[o]) { 
					
					if (typeof Event[o][a] == 'string' && Event[o][a].indexOf('src') != -1) {
						
						var img = new Image();		// Замена на img так как canvas не работает с урами
						img.src = Event[o][a];
						elem[o][a] = img;
						
					} else if (typeof Event[o][a] == 'object') {
							
						//создаем дополнительное вложение
						elem[o][a] = new Object();
						
						for (var i in Event[o][a]) {
							
							//Снова делаем проверку на то нужно ли создавать img
							if (Event[o][a][i].indexOf('src') != -1) {
								
								var img = new Image();		// Замена на img так как canvas не работает с урами
								img.src = Event[o][a][i];
								elem[o][a][i] = img;
								
							} else {
							
								elem[o][a][i] = Event[o][a][i];
								
							}
							
						}
						
					} else {
						
						elem[o][a] = Event[o][a];
						
					}
					
				}
				
			} else {
			
				elem[o] = Event[o];
				
			}
			
		}
		
	}


ну а руссую на canvas вот так
ctxMan.drawImage(
                directions,     				 	//Объект Image анимации 
                Math.round(elemEvent.fw * step), 	//Берем текущий кадр, ширина кадра * шаг 
                0,                               	//Кадры идут один за другим, тут 0
                elemEvent.w,                     	//Вырез в ширину объекта
                elemEvent.h,                     	//И в высоту
                elemPosition.x+shiftX,              //Размещаем по горизонтали на холсте
                elemPosition.y+shiftY,              //И по вертикали
                elemEvent.w,                     	//Ширина как у кадра
                elemEvent.h                      	//Ну и высота
            );

Последний раз редактировалось розовый слоник, 22.05.2012 в 15:41.
Ответить с цитированием
  #2 (permalink)  
Старый 22.05.2012, 15:58
Аватар для vadim5june
Студент
Отправить личное сообщение для vadim5june Посмотреть профиль Найти все сообщения от vadim5june
 
Регистрация: 30.04.2012
Сообщений: 1,113

А Вы к этой функции createNewEventObject один раз при загрузке обращаетесь или постоянно?
Картинка главное что сохраняется в кэше браузера и после загрзки в канвас быстро вставляется
А где хранить ссылку на картинку все равно

Последний раз редактировалось vadim5june, 22.05.2012 в 16:01.
Ответить с цитированием
  #3 (permalink)  
Старый 22.05.2012, 16:23
Профессор
Отправить личное сообщение для розовый слоник Посмотреть профиль Найти все сообщения от розовый слоник
 
Регистрация: 17.10.2009
Сообщений: 258

Цитата:
А Вы к этой функции createNewEventObject один раз при загрузке обращаетесь или постоянно?
конечно один раз, работа идет только с массивами которые она создает.
Просто если будет много разных элементов то отдать какой либо JSON, будет удобней править и понимать что происходить. нежели писать все это в массивах которые отвечают за какие то параметры объекта который нужно изобразить на канвасе

Последний раз редактировалось розовый слоник, 22.05.2012 в 16:27.
Ответить с цитированием
  #4 (permalink)  
Старый 22.05.2012, 16:24
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,588

Сообщение от vadim5june
Картинка главное что сохраняется в кэше браузера и после загрзки в канвас быстро вставляется
каким боком кеш браузера к объектам яваскрипт?
в канву вставляется объект имидж,какой создаётся- new Image().
кеш важен только при создании объекта .
розовый слоник,
1 ты не проверяешь полную загрузку в new Image() -через онлоад- легко возникнет ситуация-вставляешь изображение в канву,а ничего не меняется
2 при большом количестве new Image() -браузер начинает ложится
так что вопрос скорости -только экспериментально и индивидуально

Последний раз редактировалось dmitriymar, 22.05.2012 в 16:29.
Ответить с цитированием
  #5 (permalink)  
Старый 22.05.2012, 16:31
Профессор
Отправить личное сообщение для розовый слоник Посмотреть профиль Найти все сообщения от розовый слоник
 
Регистрация: 17.10.2009
Сообщений: 258

Цитата:
при большом количестве new Image() -браузер начинает ложится
это я тоже понимаю, просто когда начал делать сделал на img, теперь вот подумываю о том что это не верное решение и ищу альтернативу. читал что можно делать через скрытый элемент canvas но это посути выйдет тоже самое как и с img.
Ответить с цитированием
  #6 (permalink)  
Старый 22.05.2012, 16:37
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,588

вобщем смотри как можно сделать.
загнать всё в кеш браузера- невидимые изображения и отслеживать их загрузку,и так последовательно для всех изображений.-на всё один тег img
Соответственно можно использовать один new Image() для последующей работы с канвой -будет грузится в него быстро,поскольку изображения закешированны браузером.
Т.е сначала кешируем,потом как все закешировали начинаем работать с ними.Естественно что при последующих входах уже изображения будут в кеше
количество <img> и new Image() можно подобрать индивидуально. от того что их будет по 10 -ничего страшного не будет а скорость при первой загрузке/при работе с канвой может подняться в разы-зависит от задачи

Последний раз редактировалось dmitriymar, 22.05.2012 в 19:19.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Запуск Canvas в IE9! Severtain Общие вопросы Javascript 7 11.04.2012 12:36
Создание экземпляра Canvas не затрагивая HTML Tails Общие вопросы Javascript 2 09.03.2012 13:55
Скорость прорисовки на Canvas Severtain Общие вопросы Javascript 4 18.11.2011 11:22
Добавить на canvas еще один елемент greengarlic Общие вопросы Javascript 5 22.09.2010 10:16
Скорость выполнения кода mycoding Общие вопросы Javascript 6 23.04.2010 13:28