Question

这是我的htmlcode：

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
    <script src="Doge.js"></script>  
</head>

<body bgcolor="#C7C7C7" onload="Start();">
      <canvas id="DogeCanvas" width="480" height="320"></canvas>
</body>
</html>

这是我的Doge.js代码：

function Start() {
      var stage = new createjs.Stage("DogeCanvas");
      var doge = new Image();
      doge.src = "images/doge.jpg"
      var bitmap = new createjs.Bitmap(doge);
      stage.addChild(bitmap);
      stage.update();
}

为什么屏幕上没有显示任何内容？有什么问题？

Answer 1

更新舞台时未加载图像。我在这里发了一个答案：

»easeljs not showing bitmap

您可以在舞台上添加Ticker以不断更新它（大多数应用程序都会这样做，因为其他内容会随着时间的推移而发生变化）
聆听图像的上传，然后重新更新舞台
在将图像绘制到舞台之前，使用PreloadJS等图像预加载图像。

Answer 2

如上所述，在装入图像之前无法绘制图像。试试这个：

<!DOCTYPE HTML>
<html>
    <title>Easel Test</title>
    <head>
    <script src="https://code.createjs.com/easeljs-0.8.0.min.js"></script>

    <script>
        var stage;

        function init() {
            stage = new createjs.Stage("myCanvas");

            var image = new Image();
            image.src = "path/image";
            image.onload = handleImageLoad;
        }

        function handleImageLoad(event) {
            var image = event.target;
            var bitmap = new createjs.Bitmap(image);
            stage.addChild(bitmap);
            stage.update();
        }


    </script>

    </head>
    <body onload="init();">
        <canvas id="myCanvas" width="960" height="580"></canvas>
    </body>

</html>

在画架中添加简单图像

2 个答案: