畫布和舞臺在easel.js中失去全球範圍

以下是代碼。在頂部，您可以看到canvas和stage被聲明爲全局變量。然後initializeCanvas（）函數在頁面加載時運行並分配這些變量並加載背景圖像。畫布和舞臺在easel.js中失去全球範圍

奇怪的是，舞臺和畫布最終未定義。

爲什麼？我能做些什麼呢？

羅傑

var canvas, stage 

function initializeCanvas() { 
    canvas = document.getElementById("starCanvas") 
    canvas.width = window.innerWidth 
    canvas.height = 720 

    stage = new createjs.Stage("starCanvas") 

    background = new createjs.Bitmap("background1.jpg"); 
    background.image.onload = handleBackgroundImage_Loaded 
} 

function handleBackgroundImage_Loaded(evt) { 
    background.x = 0 
    background.y = 0 
    stage.addChildAt(background,0); 
    stage.update() 
} 

alert(canvas) 
alert(stage)

來源

2017-04-01 user3055135

使initializeCanvas，一個立即調用函數。此外，請始終使用console.log輸出要檢查的對象。

var canvas, stage; 
 

 
(function initializeCanvas() { 
 
    canvas = document.getElementById("starCanvas"); 
 
    canvas.width = window.innerWidth; 
 
    canvas.height = 720; 
 
    stage = new createjs.Stage("starCanvas"); 
 
    background = new createjs.Bitmap("background1.jpg"); 
 
    background.image.onload = handleBackgroundImage_Loaded; 
 
})(); 
 

 
function handleBackgroundImage_Loaded(evt) { 
 
    background.x = 0; 
 
    background.y = 0; 
 
    stage.addChildAt(background, 0); 
 
    stage.update(); 
 
} 
 
console.log(canvas); 
 
console.log(stage);

<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script> 
 
<canvas id="starCanvas"></canvas>

來源

2017-04-01 18:22:49

這適用於如果你去除畫布的東西...否則，代碼似乎在window.load事件觸發之前運行。至少階段最終被定義，所以這絕對是一個改進。 – user3055135

@ user3055135，您可以在給定的代碼片段中清楚地看到代碼完美工作。你只需要在關閉'body'標籤前放置你的*腳本* –

好吧，太棒了......非常感謝！ – user3055135

你忘了打電話給我猜的功能。某處粘貼：

initializeCanvas();

來源

2017-04-01 15:53:58 5ka

不，我沒有...我只是沒有包括部分： <車身風格=「背景色：＃555;保證金：0像素;填充：0像素「onload =」initializeCanvas（）「> – user3055135

@ user3055135這是正確的答案。 onload事件將在您已加載並執行的代碼後觸發。警告的兩行在onload事件之前運行，這就是canvas和stage未定義的原因。 – Blindman67

畫布和舞臺在easel.js中失去全球範圍

回答

相關問題