Question

我正在使用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文件，则会加载它。这是为什么？

Answer 1

请参阅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);
}

画布没有显示背景？

1 个答案: