在easeljs中添加一个简单的图像

Question

在easeljs中添加一个简单的图像

这是我的 html 代码：

<!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>

Run Code Online (Sandbox Code Playgroud)

这是我的 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();
}

Run Code Online (Sandbox Code Playgroud)

为什么它在屏幕上不显示任何内容？怎么了？

Answer 1

Lan*_*nny 5

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

»画架不显示位图

您可以向舞台添加 Ticker 以不断更新它（大多数应用程序都会这样做，因为随着时间的推移还有其他事情会发生变化）
监听图片的onload，再次更新stage
在将图像绘制到舞台之前，使用 PreloadJS 之类的东西预加载图像。

Answer 2

小智 5

如上所述，在加载图像之前，您无法绘制图像。尝试这个：

<!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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，5 月前
查看次数：	18113 次
最近记录：	11 年前