drawImage() not working

问题

I am reading through "Making Isometric Social Real-Time Games with HTML5, CSS3 and Javascript."

I am not far into it, and I have run into a canvas problem that has ahd me stumped for most of the day.

drawImage() does not seem to be drawing. I have researched the issue and have tried many permutations of pre-loading the image, but so far nothing is working.

Here is my code:

HTML:

<canvas id="game" width="100" height="100">
    Your browser doesn't include support for the canvas element.
</canvas>

CSS:

html {
height:100%;
overflow:hidden
}

body {
margin:0px;
padding:0px;
height:100%;
}

and js:

 window.onload = function() {

var canvas = document.getElementById('game');

canvas.width=document.body.clientWidth;
canvas.height=document.body.clientHeight;

var c = canvas.getContext('2d');





function showIntro() {

    var phrase = "Click or tap screen to start";

    c.clearRect (0, 0, canvas.width, canvas.height);

    var grd = c.createLinearGradient(0, 0, canvas.width, canvas.height);
    grd.addColorStop(0, "#9db7a0");
    grd.addColorStop(1, "#e6e6e6");

    c.fillStyle = grd;
    c.fillRect (0, 0, canvas.width, canvas.height);



    var logoImg = new Image();      
    logoImg.src = '../img/logo.png';

    var originalWidth = logoImg.width;

    logoImg.width = Math.round((50 * document.body.clientWidth) / 100);
    logoImg.height = Math.round((logoImg.width * logoImg.height) / originalWidth);


  var logo = {
     img: logoImg,
     x: (canvas.width/2) - (logoImg.width/2),
     y: (canvas.height/2) - (logoImg.height/2)
  }

  c.drawImage(logo.img, logo.x, logo.y, logo.img.width, logo.img.height);





    c.font = "bold 16px sans-serif";
    var mt = c.measureText(phrase);
    var xcoord = (canvas.width / 2 ) - (mt.width / 2);
    c.fillStyle = '#656565'
    c.fillText (phrase, xcoord, 30);
}

showIntro();


 }

Any help would be appreciated!

回答1:

You almost have it...

You just have to give the image time to load before drawing it.

You give an image time to load with this code:

var logoImg = new Image();
logoImg.onload = function() {

    // At this point, the image is fully loaded
    // So do your thing!

};
logoImg.src = "myPic.png";

Here is complete code and a Fiddle: http://jsfiddle.net/m1erickson/GKK39/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
    $(function(){

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

        function showIntro() {

            var phrase = "Click or tap screen to start";

            var logoImg=new Image();
            logoImg.onload=function(){

                c.clearRect (0, 0, canvas.width, canvas.height);

                var grd = c.createLinearGradient(0, 0, canvas.width, canvas.height);
                grd.addColorStop(0, "#9db7a0");
                grd.addColorStop(1, "#e6e6e6");
                c.fillStyle = grd;
                c.fillRect (0, 0, canvas.width, canvas.height);

                var originalWidth = logoImg.width;
                logoImg.width = Math.round((50 * document.body.clientWidth) / 100);
                logoImg.height = Math.round((logoImg.width * logoImg.height) / originalWidth);

                var logo = {
                  img: logoImg,
                  x: (canvas.width/2) - (logoImg.width/2),
                  y: (canvas.height/2) - (logoImg.height/2)
                }
                c.drawImage(logo.img, logo.x, logo.y, logo.img.width, logo.img.height);

                c.font = "bold 16px sans-serif";
                var mt = c.measureText(phrase);
                var xcoord = (canvas.width / 2 ) - (mt.width / 2);
                c.fillStyle = '#656565'
                c.fillText (phrase, xcoord, 30);

            }
            logoImg.src="http://dl.dropbox.com/u/139992952/car.png";

        }

        showIntro();       

    }); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

来源：https://stackoverflow.com/questions/15048279/drawimage-not-working

标签

javascript

canvas

drawimage

preloading