drawImage() không hoạt động

Tôi đang đọc qua "Tạo trò chơi thời gian thực xã hội Isometric bằng HTML5, CSS3 và Javascript".drawImage() không hoạt động

Tôi không đi sâu vào nó, và tôi đã gặp phải vấn đề về canvas đã khiến tôi bối rối trong hầu hết các ngày.

drawImage() dường như không được vẽ. Tôi đã nghiên cứu vấn đề và đã thử nhiều hoán vị trước khi tải hình ảnh, nhưng cho đến nay không có gì đang hoạt động.

Đây là mã của tôi:

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

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


}

Bất kỳ trợ giúp sẽ được đánh giá cao!

Nguồn

2013-02-24 Jeremythuff

Bạn gần như có nó ...

Bạn chỉ cần cung cấp cho thời gian tải hình ảnh trước khi vẽ.

Bạn đưa ra một thời gian hình ảnh để tải với mã này:

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

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

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

Dưới đây là mã hoàn chỉnh và một 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>

Nguồn

2013-02-24 23:56:25 markE

Điều đó đã làm nó. Thnx một tấn! – Jeremythuff

Trả lời

Các vấn đề liên quan