getcontext('webgl')返回null主因是canvas未“激活”：display:none、visibility:hidden、父容器height:0、缺失width/height属性、未挂载dom或浏览器禁用webgl；css设尺寸无效，必须用html属性定义缓冲区。
getContext('webgl') 返回 null，不是代码写错了，而是 canvas 没“活”起来——它根本没被浏览器当作可渲染的 WebGL 容器。
canvas 元素为什么必须显式设 width/height 属性？
只用 CSS 设置尺寸（比如 style="width: 800px; height: 600px;"）会导致 getContext('webgl') 静默返回 null。Canvas 的像素缓冲区尺寸由 HTML 属性 width 和 height 决定，CSS 只控制显示缩放。
- 不写属性 → 使用默认 300×150 像素缓冲区，缩放后模糊且易触发 WebGL 初始化失败
- 写了属性但值为 0 或非数字 → 同样拿不到上下文
- 想适配高 DPI 屏幕？得手动读
window.devicePixelRatio，再同步设置canvas.width/canvas.height和gl.viewport()
getContext('webgl') 返回 null 的真实原因有哪些？
别急着查浏览器兼容性，先看 DOM 状态和启动环境：
-
display: none、visibility: hidden或父容器height: 0→ WebGL 上下文初始化被跳过，直接返回null - Chrome/Edge 在虚拟机、老旧集成显卡或某些企业策略下默认禁用 WebGL → 启动时加参数
--enable-webgl --ignore-gpu-blacklist（仅开发阶段） - 用了
'experimental-webgl'→ 已废弃多年，现代浏览器只认'webgl'或'webgl2'，强行用会返回null - canvas 尚未挂载到文档树（比如刚
document.createElement('canvas')但没appendChild）→ 也返回null
着色器编译失败却没报错？你没查编译状态
GLSL 错误不会抛 JS 异常，gl.compileShader() 总是返回，不检查就等于“假装成功”：
- 编译后必须立刻调
gl.getShaderParameter(shader, gl.COMPILE_STATUS)，返回false就说明挂了 - 紧接着必须调
gl.getShaderInfoLog(shader)，否则控制台空空如也，连哪行少了个分号都看不到 - WebGL 1（
gl）只支持attribute/varying；如果用了in/out却没启用webgl2，语法直接报错 - 别把着色器写成 JS 模板字符串——缩进、换行、空格全算字符；建议从
<script type="x-shader/x-vertex"></script>标签里取textContent
三角形画不出来，黑屏却不报错？数据根本没流进 GPU
清屏成功 ≠ 渲染成功。黑屏往往卡在“数据通路”的某个环节：
- 调
gl.drawArrays()前漏了gl.useProgram(program)→ GPU 不知道该跑哪个着色器 - 顶点属性没启用：
gl.enableVertexAttribArray(location)必须在gl.vertexAttribPointer()之后调用 - 缓冲区绑错目标：传顶点坐标得用
gl.ARRAY_BUFFER，传索引才用gl.ELEMENT_ARRAY_BUFFER - 顶点着色器里漏写
gl_Position = ...→ 这是强制要求，不赋值等于没输出，GPU 直接丢弃该顶点
最容易被忽略的是：WebGL 不关心你“想表达什么”，它只认你传进去的 16 个浮点数、那个 exact 的 gl_Position 赋值、以及是否真的启用了 attribute。任何一环断开，画面就停在黑屏——而控制台可能一片安静。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
