getContext("2d") 返回 null 的主要原因是 DOM 未就绪或参数大小写错误（如"2D"），需确保脚本在 canvas 标签后执行或置于 DOMContentLoaded 回调中。
getContext("2d") 返回 null 的常见原因
调用 getContext("2d") 返回 null，基本可以断定 canvas 元素未就绪或参数错误。最常踩的坑是：在 DOM 尚未加载完成时就执行获取操作，或者传入了不支持的上下文类型（比如误写成 "2D" 或 "webgl2" 但浏览器不支持）。
- 确保脚本在
<canvas></canvas>标签之后执行，或包裹在DOMContentLoaded回调里 -
getContext()对大小写敏感："2d"✅，"2D"❌ - 检查 canvas 是否被 CSS 设置为
display: none或width/height为 0 —— 这些不影响getContext返回值，但会导致绘图不可见
WebGL 上下文获取失败时的降级处理
调用 getContext("webgl") 或 getContext("webgl2") 失败很常见，尤其在老旧设备、无 GPU 加速环境或启用了严格隐私模式的浏览器中。它不会抛错，而是静默返回 null，必须显式判断。
- 不要直接链式调用：
canvas.getContext("webgl").clear(...)会报TypeError: Cannot read property 'clear' of null - 推荐写法：
const gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");<br>if (!gl) {<br> console.error("WebGL not supported");<br> fallbackToCanvas2D();<br>} -
"experimental-webgl"是旧版 Chrome/Safari 的兼容标识，现代浏览器已支持标准"webgl"，但保留它能略微提升兼容性
同一个 canvas 能否多次调用 getContext 获取不同上下文？
不能。HTML 规范明确：一旦某个 canvas 绑定了某种上下文（如 "2d"），后续对其他类型（如 "webgl"）的 getContext 调用将始终返回 null，即使之前没真正使用过该 2D 上下文。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 这是硬性限制，不是 bug，也无法通过
reset()或删除 canvas 重插绕过 - 若需同时用 2D 和 WebGL，必须使用两个独立的
<canvas></canvas>元素，并用 CSS 层叠定位 - 注意：重复获取同一种上下文（如两次
getContext("2d")）是安全的，返回的是同一对象引用
getContext 的第二个参数影响渲染行为
getContext 支持可选配置对象，不同上下文支持的字段差异很大。忽略它通常没问题，但某些场景必须显式设置，否则行为出人意料。
立即学习“前端免费学习笔记（深入）”；
- 2D 上下文常用：
{ alpha: false }可禁用透明通道，提升性能（尤其在不需要透明度的 UI 渲染中） - WebGL 上下文关键项：
{ preserveDrawingBuffer: false }（默认false）能避免帧缓冲自动保留，显著提升动画性能；但设为true才能用toDataURL()截图 - 配置一旦传入，就绑定到该上下文实例，后续无法更改
getContext("2d") 返回 null，其实问题往往不在 API 本身，而在 DOM 就绪时机或大小写拼写这种一眼掠过却死活找不到的细节。 
