Javascript 在easeljs中添加简单图像_Javascript_Html_Easeljs

Javascript 在easeljs中添加简单图像

javascript html

Javascript 在easeljs中添加简单图像,javascript,html,easeljs,Javascript,Html,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> <

这是我的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>

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

有什么问题吗？

更新阶段时未加载图像。我在这里贴了一个答案：

您可以向stage添加一个Ticker来不断更新它（大多数应用程序都会这样做，因为随着时间的推移，还有其他事情在变化）

监听图像的加载，然后再次更新舞台

在将图像绘制到舞台之前，使用类似Prelojs的内容预加载图像

更新阶段时不会加载图像。我在这里贴了一个答案：

您可以向stage添加一个Ticker来不断更新它（大多数应用程序都会这样做，因为随着时间的推移，还有其他事情在变化）

监听图像的加载，然后再次更新舞台

在将图像绘制到舞台之前，使用类似Prelojs的内容预加载图像

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

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


架上试验
var期；
函数init（）{
stage=newcreatejs.stage（“myCanvas”）；
var image=新图像（）；
image.src=“路径/图像”；
image.onload=handleImageLoad；
}
函数handleImageLoad（事件）{
var image=event.target；
var bitmap=new createjs.bitmap（图像）；
stage.addChild（位图）；
stage.update（）；
}

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

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


架上试验
var期；
函数init（）{
stage=newcreatejs.stage（“myCanvas”）；
var image=新图像（）；
image.src=“路径/图像”；
image.onload=handleImageLoad；
}
函数handleImageLoad（事件）{
var image=event.target；
var bitmap=new createjs.bitmap（图像）；
stage.addChild（位图）；
stage.update（）；
}

当前路径上是否存在

images/doge.jpg

文件？是的，我甚至尝试将其放在文件夹外并更改为“doge.jpg”，结果相同。。也。如果我在函数中添加一个简单的“alert（“hello”）”，它会完美地显示出来……也许您在代码片段中遗漏了它，但是您缺少了doctype和代码的

部分。您还应该使用CSS对元素应用样式，而不是使用“bgcolor”（这是HTML3）之类的东西。是的，文件上有，但我没有将其复制到问题中。当前路径上是否存在

images/doge.jpg

的可能重复项？是的，我甚至尝试将其放在文件夹外并更改为“doge.jpg”同样的结果。。也。如果我在函数中添加一个简单的“alert（“hello”）”，它会完美地显示出来……也许您在代码片段中遗漏了它，但是您缺少了doctype和代码的

部分。您还应该使用CSS将样式应用于元素，而不是使用“bgcolor”（这是HTML3）之类的东西。是的，文件中有，但我没有将其复制到问题中，也可能是