HTML/CSS/JS开发中网站canvas元素被背景遮挡无法显示问题求助

核心问题1：JS执行时机错误 #

你将JS文件放在head标签中引入，执行getElementById("canvas")时，页面DOM还未完成渲染，无法获取到canvas元素，导致绘图代码直接报错不执行。
修复方案：将你的JS代码包裹在DOM加载完成的监听事件中，修改gaar.js代码如下：

document.addEventListener('DOMContentLoaded', function() {
  var c = document.getElementById("canvas");
  // 如果需要全屏背景效果，可设置canvas尺寸和视口一致
  c.width = window.innerWidth;
  c.height = window.innerHeight;
  var ctx = c.getContext("2d");
  // 测试绘图代码
  ctx.moveTo(0, 0);
  ctx.lineTo(200, 100);
  ctx.stroke();
  // 原jQuery滚动监听代码移到这里
  $(document).ready(function(){
    $(window).scroll(function(){
      if($(this).scrollTop() > 40){
        $(".woord").css({"opacity" : "0"})
      }
      else {
        $(".woord").css({"opacity" : "1"})
      }
    })
  })
})

核心问题2：代码文件类型错误 #

你将jQuery滚动监听的JS代码直接写在了CSS文件中，CSS无法解析JS语法，不仅这段功能不会生效，还可能导致后续CSS规则解析异常。
修复方案：删除CSS文件末尾的那段jQuery代码，按照上面的示例移到gaar.js文件中即可。

核心问题3：canvas层级和定位错误 #

当前canvas是普通流元素，会被后续的#div1等元素遮挡，且没有设置背景层级，无法作为页面背景展示。
修复方案：在CSS文件中添加canvas专属样式：

#canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1; /* 放到所有内容下层作为背景 */
  pointer-events: none; /* 不阻挡页面正常点击、滚动等交互 */
}

可选优化 #

如果希望白色的#div1区域也能透出canvas动效，可以将#div1的背景改为半透明：

#div1 {
  /* 替换原有的background-color:white */
  background-color: rgba(255, 255, 255, 0.9);
}

另外你原CSS中body设置的height:20px不合理，可改为min-height: 100vh避免页面高度异常。

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