画布不显示背景？答案

【问题标题】：Canvas not showing background?画布不显示背景？
【发布时间】：2014-05-10 06:47:18
【问题描述】：

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

【问题讨论】：

我使用的是.png文件，第一次加载不加载，加载后完美

标签： javascript html canvas easeljs

【解决方案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);
}

【讨论】：

此外，如果您在舞台上打勾，您实际上不必预先加载它 - 一旦加载它就会绘制到画布上。