var can;
var ctx;
var w;
var h;
var girlPic=new Image();
function init()
{
can=document.getElementById("canvas");
ctx=can.getContext("2d");
w=can.width;
h=can.height;
girlPic.src="img/girl.jpg";
gameloop();
}
document.body.onload=init;
function gameloop()
{
drawGirl();
//drawBackground();
// window.requstAnimFrame(gameloop());
}
function drawBackground()
{
ctx.fillStyle="#393550";
ctx.fillRect(0,0,w,h);
}
function drawGirl()
{
//drawImage(img,x,y)
//x轴坐标正方向向右,Y轴坐标正方向向下,(0,0)在canvas左上角
ctx.drawImage(girlPic,100,100);
}
我是因为把canvas的宽高写在样式表中了,所以图片显示不出来,不知道你是不是。
我也遇到这个问题,好像是和图片的异步加载有关,图片没有加载出来就draw了就一片空白了,可以看一下这篇文章:https://my.oschina.net/710409599/blog/531498
那么问题又来了,当图片可以加载出来的时候好像尺寸和图片清晰度也不对劲,希望有大神能回答啊
难道是你的图片宽高没定义吗?
ctx.drawImage(girlPic,100,100,600,300);