drawImage() çalışmıyor

"HTML5, CSS3 ve Javascript ile İzometrik Sosyal Gerçek Zamanlı Oyunlar Oluşturma" üzerinden yazıyorum.drawImage() çalışmıyor

Çok da uzağa gitmedim ve günümün çoğunu ezdiğim bir tuval problemine girdim.

drawImage() çizimde görünmüyor. Konuyu araştırdım ve imajı ön yüklemenin birçok permütasyonunu denedim, ama şu ana kadar hiçbir şey çalışmıyor.

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

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


}

Herhangi bir yardım mutluluk duyacağız

İşte benim kodudur!

kaynak

2013-02-24 Jeremythuff

Neredeyse tutuyorum ...

Sadece bunu çizim önce yüklenmesi görüntü zaman vermek gerekiyor. did it 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>

kaynak

2013-02-24 23:56:25 markE

var logoImg = new Image(); logoImg.onload = function() { // At this point, the image is fully loaded // So do your thing! }; logoImg.src = "myPic.png";

İşte tam kodu ve Fiddle geçerli:

Bu kod ile yük bir görüntü zaman verin. Bir ton! – Jeremythuff

cevap

İlgili konular