Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Подгрузка картинки на холсте в нутри функции.. (https://javascript.ru/forum/misc/37634-podgruzka-kartinki-na-kholste-v-nutri-funkcii.html)

Mike_Kharkov 28.04.2013 03:47

Подгрузка картинки на холсте в нутри функции..
 
Вложений: 1
Здравствуйте.
В 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. Прохожу сейчас урок одного гуру и у него такой код срабатывает:
(если я ничего не упустил из виду..)
Это видно на скрине:

Mike_Kharkov 28.04.2013 04:22

Цитата:

Сообщение от Дзен-трансгуманист (Сообщение 248354)
Элементарно, Ватсон.
В функции image локальный var img перекрывает глобальный. А функция my_draw ссылается на глобальный - а он пуст.

Увидел. Большое спасибо!


Часовой пояс GMT +3, время: 08:26.