                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /canvas实现星星闪烁特效

使用drawImage()函数后链接图片无法正常显示，求大神看下究竟是哪里出了问题？？？

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>StarGirl</title>
</head>
<body>
<div>
<canvas id="canvas" style=" display:block; margin:auto; ">
当前浏览器不支持Canvas，请更换浏览器后再试
</canvas>
</div>
<script>
window.requestAnimFrame = (function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
return window.setTimeout(callback, 1000 / 60);
};
})

var can = document.getElementById("canvas");
var cxt = canvas.getContext("2d");

window.onload = function(){
can.width = 1024;
can.height = 768;

gameloop();

}

function gameloop(){
window.requestAnimFrame( gameloop );
drawBgColor();
drawBgImage();
}

function drawBgColor(){
cxt.fillStyle = "#058";
cxt.fillRect( 0, 0, can.width, can.height )
};

function drawBgImage(){
var bgPic = new Image();
bgPic.src = "http://img.zcool.cn/community/033aa0255adeb276ac725817868b6cc.jpg";
//图片链接用的是网上随机一张图片，但是也是现在不出来，浏览器日志也没报错
cxt.drawImage( bgPic, 0, 0 );
console.log( bgPic );
};
</script>
</body>
</html>