位图图片没有显示在画布上

我需要一些指导，因为我不清楚我做错了什么。我所要做的只是在画布的中心加载一个位图，但它没有显示出来。我的文件路径是正确的，我没有看到我可能编码不正确，我哪里错了？位图图片没有显示在画布上

var canvas, stage, centerX, centerY; 

function init() { 
    'use strict'; 

    canvas = document.getElementById("easel"); 
    stage = new createjs.Stage(canvas); 
    centerX = canvas.width/2; 
    centerY = canvas.height/2; 

    var ship = new createjs.Bitmap("../images/millenium.png"), 
     shipCenterX = ship.width/2, 
     shipCenterY = ship.height/2; 

    ship.x = centerX; 
    ship.y = centerY; 
    ship.regX = shipCenterX; 
    ship.regY = shipCenterY; 

    stage.addChild(ship); 
    stage.update(); 
}

来源

2016-01-17 greyBow

这个库似乎处理绘图画布的方式是通过调用stage.update()他们建议安装到他们的“嘀”事件（例如http://www.createjs.com/docs/easeljs/classes/Stage.html）

基本上，我们需要继续不断地重绘帆布和createjs给了我们一个方法来做到这一点，就像这样：

createjs.Ticker.addEventListener("tick", handleTick); 
function handleTick(event) { 
    stage.update(); 
}

但是，因为你还没有使你stage全球访问，我调整你的初始化函数稍微使我们可以访问stage通过在函数结束时返回它。因此，你可以在全球范围内设置stage为函数的结果：

var stage = init();

而且handleTick将默认使用该stage。但是，如果您正考虑在您的函数之外重用对象，则可能需要考虑将它们传递给init函数，或将其初始数据结构保留在init函数之外，以便于访问。

https://jsfiddle.net/jpgw1oka/

来源

2016-01-17 16:09:01 pizzasynthesis

这里的关键是你必须确保在图像加载后的阶段更新。 – Lanny

并确保您加载的CreateJS库：https://code.createjs.com/createjs-2015.11.26.min.js。

删除“严格使用”。

并确保您在window.onload事件侦听器中声明了变量和函数调用。

例如

var canvas, stage; 

function init() { 

canvas = document.getElementById("easel"); 
stage = new createjs.Stage(canvas); 

var ship = new createjs.Bitmap("../images/millenium.png"); 

ship.x = Math.floor(stage.canvas.width * 0.5); 
ship.y = Math.florr(stage.canvas.height * 0.5); 
ship.regX = Math.floor(ship.image.width * 0.5); 
ship.regY = Math.floor(ship.image.height * 0.5); 

stage.addChild(ship); 
stage.update(); 

}

来源

2016-01-23 12:39:03 Berni

位图图片没有显示在画布上

回答

相关问题