Javascript 画架不显示位图_Javascript_Html_Easeljs

Javascript 画架不显示位图

javascript html

Javascript 画架不显示位图,javascript,html,easeljs,Javascript,Html,Easeljs,这是我的画架js函数，它画了一个红色的圆圈和一个图像，但是圆圈显示了，而图像没有 function Start() { var stage = new createjs.Stage("DogeCanvas"); var dog = new createjs.Bitmap("doge.jpg"); var circle = new createjs.Shape(); circle.graphics.beginFill(

这是我的画架js函数，它画了一个红色的圆圈和一个图像，但是圆圈显示了，而图像没有

function Start() {
          var stage = new createjs.Stage("DogeCanvas");
          var dog = new createjs.Bitmap("doge.jpg");
          var circle = new createjs.Shape();
          circle.graphics.beginFill("red").drawCircle(0, 0, 50);
          circle.x = 100;
          circle.y = 100;
          dog.x=100;
          dog.y=100;
          stage.addChild(circle, dog);
          stage.update();
    }

这是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来不断更新它（大多数应用程序都会这样做，因为随着时间的推移，还有其他事情在变化）

例如：

createjs.Ticker.on("tick", stage);
// OR
createjs.Ticker.addEventListener("tick", stage);
// OR
createjs.Ticker.on("tick", tick);
function tick(event) {
    // Other stuff
    stage.update(event);
}

var bmp = new createjs.Bitmap("path/to/image.jpg");
bmp.image.onload = function() {
    stage.update();
}

var queue = new createjs.LoadQueue();
queue.on("complete", function(event) {
    var image = queue.getResult("image");
    var bmp = new createjs.Bitmap(image);
    // Do stuff with bitmap
});
queue.loadFile({src:"path/to/img.jpg", id:"image"});

收听图像的

onload

，然后再次更新舞台

例如：

createjs.Ticker.on("tick", stage);
// OR
createjs.Ticker.addEventListener("tick", stage);
// OR
createjs.Ticker.on("tick", tick);
function tick(event) {
    // Other stuff
    stage.update(event);
}

var bmp = new createjs.Bitmap("path/to/image.jpg");
bmp.image.onload = function() {
    stage.update();
}

var queue = new createjs.LoadQueue();
queue.on("complete", function(event) {
    var image = queue.getResult("image");
    var bmp = new createjs.Bitmap(image);
    // Do stuff with bitmap
});
queue.loadFile({src:"path/to/img.jpg", id:"image"});

在将图像绘制到舞台之前，使用类似Prelojs的内容预加载图像。对于拥有更多资产的大型应用程序来说，这是一个更好的解决方案

例如：

createjs.Ticker.on("tick", stage);
// OR
createjs.Ticker.addEventListener("tick", stage);
// OR
createjs.Ticker.on("tick", tick);
function tick(event) {
    // Other stuff
    stage.update(event);
}

var bmp = new createjs.Bitmap("path/to/image.jpg");
bmp.image.onload = function() {
    stage.update();
}

var queue = new createjs.LoadQueue();
queue.on("complete", function(event) {
    var image = queue.getResult("image");
    var bmp = new createjs.Bitmap(image);
    // Do stuff with bitmap
});
queue.loadFile({src:"path/to/img.jpg", id:"image"});

答案完全正确：），只是为了帮助其他人使用第2点，为了监听图像的

onload

事件，您可以使用

createjs.Bitmap的image
属性，例如：var Bitmap=new createjs.Bitmap（“image.jpg”）；bitmap.image.onload=函数（）{stage.update（）；}。。。stage.addChild（位图）+1:）如果要应用筛选器，也会出现这种情况。