问答详情
源自:2-3 绘制女孩图片

使用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>

提问者:505donkey 2015-08-12 09:36

个回答

  • xiaoleezi
    2015-12-14 22:17:44

    var cxt = canvas.getContext("2d"); 你这句话错了,应该是can