drawImage（）不起作用

我在閱讀「使用HTML5，CSS3和Javascript製作等距社交實時遊戲」。drawImage（）不起作用

我不是很靠近它，而且我遇到了一個帆布問題，這個問題讓我在一天中的大部分時間都難倒了。

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


}

任何幫助，將不勝感激！

來源

2013-02-24 Jeremythuff

你幾乎有它...

你只需要給圖像繪製的時間之前加載。

你給圖像時，使用此代碼加載：

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>

來源

2013-02-24 23:56:25 markE

這做到了。 Thnx一噸！ – Jeremythuff 2013-02-25 00:42:57

drawImage（）不起作用

回答

相關問題