leinwand und bühne verlieren globalen umfang in staffelei.js

Question

Hier ist der code. Oben können Sie sehen, dass Canvas und Bühne als globale Variablen deklariert sind. Dann wird die Funktion initializeCanvas() beim Laden der Seite ausgeführt und weist diese Variablen zu und lädt ein Hintergrundbild.

Seltsamerweise enden Bühne und Leinwand jedoch undefiniert.

Warum? Und was kann ich dagegen tun?

Roger

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) 

Answer 1

initializeCanvas machen, eine sofort aufgerufen Funktion. Verwenden Sie außerdem immer console.log, um ein Objekt zur Prüfung auszugeben.

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>

Answer 2

Sie haben vergessen, die Funktion Ich denke, zu nennen. Irgendwo einfügen:

initializeCanvas();