                        課程
                    
                        /前端開發
                        
                            /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>