canvas 并在 easel.js 阶段失去全局范围

Question

这是代码。在顶部，您可以看到 canvas 和 stage 被声明为全局变量。然后 initializeCanvas() 函数在页面加载时运行并分配这些变量并加载背景图像。

奇怪的是，stage 和 canvas 最终未定义。

为什么？我该怎么办？

罗杰

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();

Answer 2

make 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>

canvas 并在 easel.js 阶段失去全局范围

canvas and stage losing global scope in easel.js

javascript

canvas

createjs

easeljs