drawImage()

काम नहीं कर रहा है मैं "एचटीएमएल 5, CSS3 और जावास्क्रिप्ट के साथ आईसोमेट्रिक सोशल रीयल-टाइम गेम्स बनाना" पढ़ रहा हूं।drawImage()

मैं इसमें बहुत दूर नहीं हूं, और मैंने एक कैनवास समस्या में भाग लिया है जिसने मुझे दिन के अधिकांश दिनों में रोक दिया है।

drawImage() ड्राइंग प्रतीत नहीं होता है। मैंने इस मुद्दे पर शोध किया है और छवि को प्री-लोड करने के कई क्रमिक प्रयासों की कोशिश की है, लेकिन अभी तक कुछ भी काम नहीं कर रहा है।

एचटीएमएल:

<canvas id="game" width="100" height="100"> 
    Your browser doesn't include support for the canvas element. 
</canvas>

सीएसएस:

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

आप लगभग यह है ...

तुम बस छवि समय यह ड्राइंग से पहले लोड करने के लिए देना पड़ता है। 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

कि यह आपने क्या किया:

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

यहाँ पूरा कोड और एक फिडल है:

आप एक छवि समय इस कोड के साथ लोड करने के लिए दे। एक टन Thnx! – Jeremythuff

उत्तर

संबंधित मुद्दे