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 пустой остаётся.... как мне сделать, чтобы при загрузке они сразу прорисовывались (которые видны), а другие при скроллинге (если появятся). вообщем что не так? хелп. |
Цитата:
то цикл нарушаете-закомментируйте canvDraw = document.getElement..-должна быть локальной var canvDraw=... |
чтото не выходит ((((
canvArr.splice(d,1); - мне нужен, чтобы удалить использованные канвасы из списка. А то код будет запускаться вновь и вновь при скроллинге.
var canvDraw = document.getElementById(canvArr[d][0]).getContext('2d');
не решил проблему. или я что-то не так сделал? можешь показать весь код правильный? |
| Часовой пояс GMT +3, время: 02:18. |