HTML5 Canvas 中设置图形透明度用 globalAlpha；它为全局状态变量，影响后续所有绘制操作，需手动重置或配合 save()/restore() 使用。
HTML5 Canvas 中设置图形透明度用 globalAlpha
Canvas 绘图上下文本身不支持元素级透明度，而是通过全局 alpha 值控制后续所有绘制操作的透明度。它不是 CSS 的 opacity，也不作用于已绘制内容，只影响之后的 fill()、stroke()、drawImage() 等调用。
常见错误是以为设一次就能让某个矩形变半透，结果发现后面画的圆、文字也一起变淡了——因为 globalAlpha 是状态变量，必须手动恢复：
-
ctx.globalAlpha = 0.5;→ 接下来所有绘制都按 50% 透明度渲染 - 画完需要透明的对象后，记得重置：
ctx.globalAlpha = 1.0; - 若需嵌套不同透明度区域，建议用
ctx.save()/ctx.restore()配合设置，避免污染后续绘图
CSS 控制 HTML5 可视化容器整体透明度用 opacity 或 rgba()
如果你在用 D3、ECharts、Three.js 或自定义 SVG + Canvas 混合布局，透明度通常该由 CSS 控制容器层级，而不是侵入绘图逻辑。比如一个 HTML5 可视化一旦进入 3D，透明度就不再是“设个值就行”的事。Three.js 中设置 立即学习“前端免费学习笔记（深入）”； ECharts 的 真正麻烦的是多层叠加时的透明度叠加效应——比如 Canvas 绘制层 + SVG 图标层 + CSS 遮罩层，各自 alpha 相乘后可能远低于预期。这种场景下，与其反复调试数值，不如把部分视觉效果提前烘焙进图片或使用
opacity: 0.7; 会让整个容器（含 Canvas 内容、子元素、边框）统一变淡，但会继承给子元素，且无法单独控制内部某一部分fill: rgba(255, 0, 0, 0.4); —— 这在 SVG 元素或 Canvas 的 fillStyle 中都有效fillStyle 支持 rgba() 字符串、十六进制（不带 alpha）、hsla()，但不支持 CSS 变量或 currentcolor
WebGL（如 Three.js）中透明物体必须开启深度测试与混合
material.transparent = true 后，若没配对启用混合模式，物体会显示为黑色或完全消失。
material.opacity = 0.6; + material.transparent = true;
THREE.NormalBlending，多数情况够用；但若出现前后顺序错乱（远的盖近的），要检查渲染顺序，必要时用 material.depthWrite = false;
可视化库（ECharts / AntV）里改透明度优先查配置项而非硬写 CSS
itemStyle.opacity、lineStyle.opacity 或 AntV G2 的 style.fillOpacity 都是内置支持的字段，比在 DOM 上加 opacity 更安全——后者可能把图例、坐标轴、文字全变淡，破坏可读性。
series: [{ itemStyle: { opacity: 0.3 } }]
color: { type: 'linear', ... } 的 stop 颜色里，用 rgba()
.echarts-container 直接设 CSS opacity，会导致 tooltip 交互变弱甚至失效ctx.globalCompositeOperation 控制合成模式。
