Question

为什么首先弹出警报（“ 2”）？
为什么不能创建全局变量c和ctx？

如何创建这两个全局变量，以便可以在其他函数中使用它们，例如drawCircle（）;

//html5
//<script type="text/javascript" src="my.js"></script>
// ...
//<canvas id="can" width="500" height="500></canvas>

//my.js
//The working code
window.onload = drawRectangle;
function drawRectangle() {
    var c = document.getElementById("can");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "green";
    ctx.fillRect(50, 50, 200, 100);
}  


//my.js 
//The non-working code 
//alert function just for debugging  
window.onload = init;
var c;
var ctx;
function init() {
    alert("1");
    c = document.getElementById("can");
    ctx = c.getContext("2d");
}
function drawRectangle() {
    alert("2");
    ctx.fillStyle = "green";
    ctx.fillRect(50, 50, 200, 100);
}
drawRectangle();

如果我在同一HTML5文件中将c和ctx创建为全局变量，它可以正常工作。为什么无法在外部javascript文件上使用？

Answer 1

您正在运行drawRectangle()之前呼叫init。它按预期使用全局变量，但它们仍未初始化。将呼叫移至init函数中：

var c;
var ctx;
function init() {
    alert("1");
    c = document.getElementById("can");
    ctx = c.getContext("2d");
    drawRectangle();
//  ^^^^^^^^^^^^^^^^
}
function drawRectangle() {
    alert("2");
    ctx.fillStyle = "green";
    ctx.fillRect(50, 50, 200, 100);
}
window.onload = init;

这样做之后，您可以（并且应该）避免使用全局变量，而只需通过参数传递必要的值即可：

function init() {
    var c = document.getElementById("can");
    var ctx = c.getContext("2d");
    drawRectangle(ctx);
//                ^^^
}
function drawRectangle(ctx) {
//                     ^^^
    ctx.fillStyle = "green";
    ctx.fillRect(50, 50, 200, 100);
}
window.onload = init;

Answer 2

经过几天的阅读，下面是为什么不绘制矩形的说明。

在加载页面时，将调用drawRectangle（）。但是，变量c和ctx尚未初始化。因此，它不会绘制矩形。
在页面加载完成之前，将调用init（）函数，并且变量c和ctx也尚未初始化。结果，将不会绘制矩形。

我的JavaScript文件中的全局变量问题

2 个答案: