Question

当我尝试在javascript中加载getContext函数时，我必须使用window.load函数在运行我的javascipt代码之前首先加载DOM对象。所以我的问题是，是否有任何其他方式来运行getContext函数，而不必将我的所有代码都放在一个函数中，而不使用其他类型的库。这是我的代码。

function init() {
    var cvs = document.getElementById("myCanvas"); 
    var ctx = cvs.getContext("2d");
    ctx.rect(20,20,150,100);
    ctx.stroke();	
}

window.onload = init;

在这里我想使用ctx.rect，并且ctx.stroke不在我的函数之内。

Answer 1

您也可以将脚本放在HTML的底部。

＆＃13;

this

＆＃13;

您还可以确保脚本位于单独的文件中并使用<div id="someid"></div> <script> console.log(document.querySelector('#someid')); </script>：

defer

<head> <script src="myscript.js" defer></script> </head> <body> <div id="someid"></div>只会在加载文档后自动运行脚本，所以我认为它是最好的方法。此外，由于脚本是关于如何与内容交互而不是内容本身的信息，我认为它们在语义上属于标题而不是在主体的末尾。（虽然你可以将一个脚本放在正文的末尾，以确保在脚本运行之前填充正文，但我不认为这是一种非常干净的做事方式）

Answer 2

你需要确保你的DOM在使用canvas标签填充之后运行，否则当JS正在寻找它时它就不会存在。

这样做的一种方法就是你已经做过的。这可能是最好的方式。但我会这样写：

window.addEventListener("load", init);

这没有任何问题，你应该养成将所有代码都放在函数中的习惯。但还有其他选择。

您可以将defer属性放在script标记中。这将使它在DOM加载后运行。

或者您可以将script标记放在canvas标记之后的某个位置。 script标记在HTML中出现的位置决定了它的执行时间。所以你可以把它放在body的末尾。

是否有另一种编写代码的方法，而无需使用window.onload函数

2 个答案: