Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.07.2013, 17:38
Аватар для max0n
Аспирант
Отправить личное сообщение для max0n Посмотреть профиль Найти все сообщения от max0n
 
Регистрация: 23.05.2012
Сообщений: 44

canvas img draw проблема
всем привет! у меня есть код:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<style type="text/css">canvas  {background: #eee; margin: 2px;}</style>
		<script>
canvArr = new Array();

			
function arrowUp(){
	var counDel = 0;
	for(var i=0; i<canvArr.length; i++){
		(function(d){//замыкание
			elemArrow = document.getElementById(canvArr[d][0]).getBoundingClientRect(); //Получение координат
			if(document.body.clientHeight-elemArrow.top>150){	//если канвас виден хотябы на 3/4, то....
				canvDraw = document.getElementById(canvArr[d][0]).getContext('2d'); //получаю 2D холст нашего канваса
				var pic = new Image();	//создаю изображение для нарисовки
				pic.onload = function() {  // Когда изображение загрудится, начать рисовать
					canvDraw.clearRect(0, 0, 800, 200); //чистим холст
					canvDraw.drawImage(pic, 0, 0, 25,200);  // Рисуем изображение от точки с координатами 0, 0
					canvDraw.drawImage(pic, 200, 0, 25,200);// Рисуем изображение от точки с координатами 25, 200
				};
				pic.src = 'img/arrow.png'; //ссылка на изображение
				canvArr.splice(d,1); //удалить элемент массива
			}
		})(i);
	}
}
		</script>
	</head>
	<body>
		<canvas  id="1"  width="800" height="200"></canvas><script>canvArr.push([1,23,34,45,56]);</script>
		<canvas  id="2"  width="800" height="200"></canvas><script>canvArr.push([2,2,2]);</script>
		<canvas  id="3"  width="800" height="200"></canvas><script>canvArr.push([3,89,47]);</script>
	</body>
	<script>if(canvArr.length>0){window.onscroll = function() {arrowUp();}; window.onload = function(){arrowUp();};}</script>
</html>


в нём у меня 3 канваса (а может быть сколько угодно).
и мне нужно в эти канвасы (если они видны при загрузке или скроллинге) нарисовать изображения.
но вопреки всему, при запуске страницы рисуется только в последнем канвасе... а при скроллинге, рисуется ещё в одном... а ещё 1 пустой остаётся....

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

Сообщение от max0n
но вопреки всему, при запуске страницы рисуется только в последнем канвасе...
когда Вы пишите canvArr.splice(d,1);
то цикл нарушаете-закомментируйте
canvDraw = document.getElement..-должна быть локальной
var canvDraw=...
Ответить с цитированием
  #3 (permalink)  
Старый 04.07.2013, 21:31
Аватар для max0n
Аспирант
Отправить личное сообщение для max0n Посмотреть профиль Найти все сообщения от max0n
 
Регистрация: 23.05.2012
Сообщений: 44

чтото не выходит ((((

canvArr.splice(d,1); - мне нужен, чтобы удалить использованные канвасы из списка. А то код будет запускаться вновь и вновь при скроллинге.

var canvDraw = document.getElementById(canvArr[d][0]).getContext('2d');

не решил проблему.
или я что-то не так сделал?

можешь показать весь код правильный?
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Некорректная работа get(set)Attribute в IE для элементов img back to back Internet Explorer 15 09.06.2012 16:52
Создание экземпляра Canvas не затрагивая HTML Tails Общие вопросы Javascript 2 09.03.2012 13:55
Проблемы с Canvas Verhal Общие вопросы Javascript 1 24.01.2012 21:51
Добавить на canvas еще один елемент greengarlic Общие вопросы Javascript 5 22.09.2010 10:16
Canvas: drawImage проблема. Jurasmi jQuery 3 11.01.2010 14:57