图形渲染中上下文变量管理的核心是“用前保存、用后恢复”，主流api均提供成对函数（如cgcontextsavegstate/restoregstate、ctx.save/restore、glpushattrib/popattrib），通过封装为作用域函数或结合组件生命周期可实现自动状态隔离与重置，避免隐式污染。
图形渲染中上下文变量的管理，核心在于“用前保存、用后恢复”，而不是靠手动清空或逐个重置。普通代码块本身不带自动机制，但可以通过封装调用模式实现状态隔离和自动重置——关键不是语言特性，而是结构设计。
用 save/restore 成对包裹绘制逻辑
几乎所有主流图形 API 都提供成对的状态快照函数，它们天然适配代码块式管理：
-
Core Graphics（iOS/macOS）：用
CGContextSaveGState()开头、CGContextRestoreGState()结尾，中间任意修改线宽、颜色、阴影、变换等，退出时自动还原 -
WebGL（1.0）：用
glPushAttrib(bitmask)+glPopAttrib()，例如只保存纹理和混合状态：glPushAttrib(GL_TEXTURE_BIT | GL_COLOR_BUFFER_BIT) -
Canvas 2D：
ctx.save()和ctx.restore()是最轻量、最常用的方式，无需参数，自动保存全部绘图状态
封装为可复用的“状态作用域”函数
避免每次手写 save/restore，可封装一个高阶函数或宏，在普通代码块内自动完成生命周期管理：
- 在 JavaScript 中可写一个简易作用域函数：
function withContext(ctx, fn) { ctx.save(); try { fn(ctx); } finally { ctx.restore(); } }
调用：withContext(ctx, c => { c.fillStyle = 'red'; c.fillRect(0,0,100,100); }); - 在 C/C++（如 Emscripten）中可用宏模拟（注意作用域限制）：
#define WITH_GL_STATE(mask) do { glPushAttrib(mask);/* your rendering code */glPopAttrib(); } while(0)
警惕隐式状态污染的常见位置
即使用了 save/restore，以下位置仍易出错，需在代码块边界特别检查：
-
着色器切换后未重置 uniform：绑定新 program 前，旧 program 的 uniform 值不会自动清除，建议在
glUseProgram()后显式设置关键 uniform（如 MVP 矩阵） -
VAO 切换遗漏：WebGL 2.0+ 或 OpenGL Core Profile 中，VAO 是状态的一部分；绘制前必须
glBindVertexArray(vao)，且不能依赖“上一次绑的是谁” -
帧缓冲切换未清理：从 FBO 切回默认帧缓冲（
glBindFramebuffer(GL_FRAMEBUFFER, 0)）后，记得重置 viewport 和 scissor，否则后续绘制可能被裁剪或缩放异常
React 或 UI 框架中结合生命周期自动管理
在组件化环境里，可把上下文管理与渲染周期绑定，让“自动重置”更可靠：
- 使用
react-chartjs-2时，每个图表实例独占 Canvas 上下文，内部已封装save/restore，开发者只需确保data或options更新触发重绘，无需手动干预上下文 - 自定义 Canvas 组件中，可在
useEffect清理函数里调用ctx.resetTransform()、ctx.setTransform(1,0,0,1,0,0)，并重置globalAlpha、globalCompositeOperation等易漏项
