畫布不顯示背景？

我正在使用EaselJS，出於某種原因，我的畫布並未將圖像顯示爲背景，即使這是教程如何操作。我的HTML文件是這樣：畫布不顯示背景？

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Requiescat in Pace</title> 

     ...lots of .js imports for EaselJS 

     <script type="text/javascript" src="RIPwitheasel.js"></script> 


     <style> 
      canvas { 
        position: absolute; 
        left: 0; 
        right: 0; 
        top: 10%; 
        padding-left: 0; 
        padding-right: 0; 
        margin-left: auto; 
        margin-right: auto; 
        display: block; 
        width: 800px; 
        background: transparent; 
       } 

     </style> 
     <link rel="stylesheet" type="text/css" href="style_2.css"> 
    </head> 
    <body onload="init()"> 
      <font color = white> 
      <img alt = "full screen bg img" src = "images/backgrounds/pagebackground.jpg" id = "full-screen-background-image"/> 
      <div style="position: relative"> 
       <h1 style="position: fixed; width:100%; text-align: center"> <strong> Requiescat In Pace </strong> </h1> 
       <p style = "text-align: center"> Prototype 1 </p> 
      </div> 
      <form action="" style = "position: fixed; top: 0; width: 100% text-align: center" > 
       <input type="button" value="Donate!!!"> 
      </form> 
      <div style="position: relative"> 
       <p style="position: fixed; bottom: 0; width:100%; text-align: center"> Credits: To be added</p> 
      </div> 
     <canvas id="gameCanvas" width="1000" height="736"> 
      Your browser does not support canvas. Please try again with a different browser. 
     </canvas> 
     </font> 
    </body> 
</html>

而且我RIPwitheasel.js是這樣的：

var stage; 

function init() 
{ 
    var canvas = document.getElementById("gameCanvas"); 
    stage = new createjs.Stage(canvas); 

    var background = new createjs.Bitmap("images/backgrounds/grass-tiled.png"); 
    stage.addChild(background); 

    createjs.Ticker.setFPS(60); 

    stage.update(); 
} 

function tick() 
{ 
    stage.update(); 
}

它是什麼，定義不正確？所有頁面都正確顯示，但畫布不顯示圖像。我在js文件的瀏覽器控制檯中得到零運行時錯誤。

編輯：我只是意識到，如果我使用.jpg文件而不是.png文件，它會加載它。爲什麼是這樣？

來源

2014-03-31 AggieDev

我使用PNG文件，第一次，也不會加載它，它加載後完美 –

請參閱從CreateJS開發這樣的回答：https://stackoverflow.com/a/20682883/1996480

這裏是你如何可以使用PreloadJS加載你的背景：

var queue = new createjs.LoadQueue(); 
queue.on("complete", handleComplete, this); 
queue.loadFile({id:"myBackground", src:"images/backgrounds/grass-tiled.png"}); 

function handleComplete() { 
    var image = queue.getResult("myBackground"); 
    stage.addChild(image); 
}

來源

2014-03-31 13:37:58 kihu

此外，如果您正在勾選舞臺，您實際上不必預加載它 - 一旦它被加載，它將畫到畫布上。 – Lanny

畫布不顯示背景？

回答

相關問題