//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();
如果我创建c和CTX在同一HTML5文件的全局变量,和它的作品,因为它应该。为什么不能在一个外部JavaScript文件的工作?您呼叫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;
几天后阅读,以下是解释为什么矩形将无法绘制。