为什么图片出不来啊- -

来源:2-3 绘制女孩图片

qq_将心丶_03483841

2016-06-13 22:16


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);

}


写回答 关注

3回答

  • qq_QQ_62
    2016-11-15 13:39:32

    我是因为把canvas的宽高写在样式表中了,所以图片显示不出来,不知道你是不是。

  • 梧桐_细雨
    2016-10-25 16:36:26

    我也遇到这个问题,好像是和图片的异步加载有关,图片没有加载出来就draw了就一片空白了,可以看一下这篇文章:https://my.oschina.net/710409599/blog/531498

    那么问题又来了,当图片可以加载出来的时候好像尺寸和图片清晰度也不对劲,希望有大神能回答啊

  • 轻键快码
    2016-06-15 09:16:52

    难道是你的图片宽高没定义吗?

    ctx.drawImage(girlPic,100,100,600,300);

canvas实现星星闪烁特效

使用HTML5实现轮播图片上的序列帧,进行拆分讲解,逐步实现目标

54188 学习 · 121 问题

查看课程

相似问题