无需window.onload及额外库，JavaScript调用getContext的替代方法

嘿，这个问题我太有发言权了！确实不用把所有代码塞进window.onload或者依赖第三方库，有几个原生的简单方案能解决这个问题，我给你逐个拆解：

1. 把脚本放在<body>标签的最末尾 #

HTML是从上到下逐行解析的，当浏览器运行到页面底部的脚本时，前面的所有DOM元素（包括你的<canvas>）都已经被加载并解析完成了。这是最直接也最常用的方案，完全不需要额外的事件监听。

示例代码：

<body>
  <canvas id="myCanvas"></canvas>

  <!-- 把你的脚本放在body结束标签前 -->
  <script>
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");
    ctx.rect(20,20,150,100);
    ctx.stroke();
  </script>
</body>

2. 给<script>标签添加defer属性 #

defer属性会告诉浏览器：先继续解析HTML，等DOM树构建完成后再执行这个脚本，而且不会阻塞页面渲染。这个方案适合把脚本放在<head>里的情况，同时能保证脚本执行时DOM已经就绪。

示例代码（外部脚本）：

<head>
  <!-- defer确保脚本在DOM加载后执行 -->
  <script src="your-canvas-script.js" defer></script>
</head>
<body>
  <canvas id="myCanvas"></canvas>
</body>

如果是内联脚本，部分现代浏览器也支持defer，不过更推荐用在外部脚本上，保持代码整洁。

3. 监听DOMContentLoaded事件 #

这个事件会在**DOM树完全构建完成（无需等待图片、样式表等外部资源加载）**时触发，比window.onload的触发时机更早，而且可以添加多个独立的监听函数，不会像window.onload = init那样覆盖之前的绑定。

示例代码：

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

方案对比 #

• 方案1：最简单直观，适合小型项目或快速原型开发。
• 方案2：适合需要把脚本放在<head>里的场景，不影响页面解析速度。
• 方案3：最灵活，适合需要精确控制DOM就绪时机的复杂项目，支持多事件监听。

内容的提问来源于stack exchange，提问作者FourPhoto