位圖圖片沒有顯示在畫布上

我需要一些指導，因爲我不清楚我做錯了什麼。我所要做的只是在畫布的中心加載一個位圖，但它沒有顯示出來。我的文件路徑是正確的，我沒有看到我可能編碼不正確，我哪裏錯了？位圖圖片沒有顯示在畫布上

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

位圖圖片沒有顯示在畫布上

回答

相關問題