Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.04.2013, 03:47
Аватар для Mike_Kharkov
Кандидат Javascript-наук
Отправить личное сообщение для Mike_Kharkov Посмотреть профиль Найти все сообщения от Mike_Kharkov
 
Регистрация: 04.01.2012
Сообщений: 143

Подгрузка картинки на холсте в нутри функции..
Здравствуйте.
В JS я не силён но - несмотря на это недавно начал пытаться разбираться
в тонкостях HTML5 canvas и по ходу дела столкнулся с определёнными трудностями!
Есть такой код:
Код:
#canvas{
	border-radius:155px;
	border:1px solid #CC9933;
	margin:10px 0 0 10px;
	box-shadow:2px 2px 15px #CC9933;
	float:left;
}

Код:
<!DOCTYPE html>
<html>
<head>
	<link href="style_video.css" type="text/css" rel="stylesheet">
	<script type='text/javascript' src="canvas_video.js"></script>
</head>
<body onload="init()" >
	    <canvas id="canvas" width="1000" height="591">
	    	
	    </canvas>
</body>
</html>

var canvas, ctx, w, h;
var img;

function init(){
		canvas = document.getElementById("canvas");
		w = canvas.width;
		h = canvas.height;
		ctx = canvas.getContext('2d');
		ctx.clearRect(0,0,w,h);
		ctx.strokeStyle="transparent";
		ctx.strokeRect(0,0,w,h);
		image();
    
}

function image(){
        var img = new Image();
        img.src = 'images/girl_elf.jpg';
        
        img.onload = function(){
            ctx.drawImage(img,0,0,440,591);
       }
}


Он работает нормально!
Но! Как только я переопределяю 21-ю строчку JS кода в новую функцию - это дело перестаёт работать!?

var canvas, ctx, w, h;
var img;

function init(){
		canvas = document.getElementById("canvas");
		w = canvas.width;
		h = canvas.height;
		ctx = canvas.getContext('2d');
		ctx.clearRect(0,0,w,h);
		ctx.strokeStyle="transparent";
		ctx.strokeRect(0,0,w,h);
		image();
    
}

function image(){
        var img = new Image();
        img.src = 'images/girl_elf.jpg';
        
        img.onload = function(){
            my_draw();
       }
}

function my_draw(){
        ctx.drawImage(img,0,0,440,591);
}


Здесь не работает строка 26!?

Кто нибудь может объяснить почему это происходит?
P.S. Прохожу сейчас урок одного гуру и у него такой код срабатывает:
(если я ничего не упустил из виду..)
Это видно на скрине:
Изображения:
Тип файла: jpg nikita_severinov.jpg (191.3 Кб, 3 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 28.04.2013, 04:22
Аватар для Mike_Kharkov
Кандидат Javascript-наук
Отправить личное сообщение для Mike_Kharkov Посмотреть профиль Найти все сообщения от Mike_Kharkov
 
Регистрация: 04.01.2012
Сообщений: 143

Сообщение от Дзен-трансгуманист Посмотреть сообщение
Элементарно, Ватсон.
В функции image локальный var img перекрывает глобальный. А функция my_draw ссылается на глобальный - а он пуст.
Увидел. Большое спасибо!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как извлечь адрес картинки, указанный внутри функции onclick? sidarvik Events/DOM/Window 19 04.02.2013 00:05
arguments вызвавшей функции mister_maxim Общие вопросы Javascript 4 12.10.2010 16:21
Подгрузка функции при загрузке страницы BorisBritva Элементы интерфейса 4 13.05.2010 21:59
Как изменить размер картинки? Mihail Общие вопросы Javascript 1 25.10.2009 13:42