Холст не показывает фон?

Я использую 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, он загружает его. Почему это?


javascript canvas html easeljs
person AggieDev    schedule 31.03.2014    source источник
comment
Я использую файл .png, в первый раз он не загружается, после этого загружается отлично   -  person Tamil Selvan C    schedule 31.03.2014

Ответы (1)


arrow_upward
0
arrow_downward

См. этот ответ от разработчика 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);
}
person kihu    schedule 31.03.2014
comment
Кроме того, вам фактически не нужно предварительно загружать его, если вы отмечаете сцену — как только он загружен, он будет отображаться на холсте. - person Lanny; 31.03.2014