html5可以画动态图吗,html5绘制图片的问题

为什么我把new Image()放在function里面时，图片出不来。

var girl = document.getElementById("girl");

var girlWidth = 800;

var girlHeight = 400;

girl.width = girlWidth;

girl.height = girlHeight;

var girlCans = girl.getContext('2d');

function init(){

drawGirl();

}

function drawGirl(){

var girlPic = new Image();

girlPic.src = "img/girl.jpg";

girlCans.drawImage(girlPic,0,0, girlWidth, girlHeight);

}

然而我把girlPic设为全局的就能正常显示

var girl = document.getElementById("girl");

var girlWidth = 800;

var girlHeight = 400;

girl.width = girlWidth;

girl.height = girlHeight;

var girlCans = girl.getContext('2d');

var girlPic = new Image();

girlPic.src = "img/girl.jpg";

function init(){

drawGirl();

}

function drawGirl(){

girlCans.drawImage(girlPic,0,0, girlWidth, girlHeight);

}