画布不显示背景

Canvas not showing background?

本文关键字：背景 显示 布不      更新时间：2023-09-26

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

看看 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);
}
相关文章：