javascript - 为什么必须使用 window.onload 将图像绘制到 Canvas 上

Question

我正在尝试将图像绘制到 Canvas 上，但代码:

ctx.drawImage(ground, 0, 0);

本身不起作用。有人向我指出，这是因为执行该行时未加载 html。有人向我建议了这段代码，它有效:

window.onload = function(){
    ctx.drawImage(ground, 0, 0);
}

我不明白为什么这会起作用，因为我认为类似的解决方案是将脚本标记放在正文下方，我这样做了，但这不起作用。有人可以用幼儿能理解的方式向我解释一下吗？

Answer 1

首先，在网页中，JavaScript 首先执行，然后再加载正文中的文本。所以排名<script>在语法上的任何地方标记并不重要，因为它将首先加载。 ctx.drawImage(ground, 0, 0);在页面渲染之前运行，因此您看不到输出。

Window.onload是一种在整个文档呈现后运行其中的函数的方法。渲染并运行函数后，您将看到所需的输出。