drawImage() nie działa

Przeczytam "Tworzenie izometrycznych gier społecznościowych w czasie rzeczywistym za pomocą HTML5, CSS3 i Javascript."drawImage() nie działa

Nie jestem daleko w tym, a ja natknąłem się na problem z płótnem, który mnie zaskoczył przez większość dnia.

drawImage() nie wydaje się rysować. Zbadałem problem i próbowałem wielu permutacji wstępnego ładowania obrazu, ale jak na razie nic nie działa.

Oto mój kod:

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

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


}

Każda pomoc będzie mile widziana!

Źródło

2013-02-24 Jeremythuff

Prawie ... mieć go

Po prostu trzeba dać czas, aby załadować obraz przed wyciągnięciem go.

można dać czas, aby załadować obraz z tym kodem:

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

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

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

Oto kompletny kod i 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>

Źródło

2013-02-24 23:56:25 markE

że to zrobił. Thnx tonę! – Jeremythuff

drawImage() nie działa

Odpowiedz

Powiązane problemy