метода drawImage() не работает

Я читаю " создание изометрических социальных игр в реальном времени с HTML5, CSS3 и Javascript."

Я не далеко в этом, и я столкнулся с проблемой холста, которая меня озадачила большую часть дня.

drawImage (), похоже, не рисует. Я исследовал проблему и попробовал много перестановок предварительной загрузки изображения, но пока ничего не работает.

вот мой код:

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%;
}

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


 }

любая помощь будет оценили!

19
canvas drawimage javascript preloading

1 ответов

У вас почти есть...

вы просто должны дать изображение время для загрузки, прежде чем рисовать его.

вы даете время изображения для загрузки с помощью этого кода:

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

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

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

вот полный код и скрипка: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>
33