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 控制容器层级，而不是侵入绘图逻辑。比如一个 <div id="chart"> 包裹 Canvas：
- 用
opacity: 0.7;会让整个容器（含 Canvas 内容、子元素、边框）统一变淡，但会继承给子元素，且无法单独控制内部某一部分 - 更精准的做法是用背景或描边颜色直接带 alpha，例如
fill: rgba(255, 0, 0, 0.4);—— 这在 SVG 元素或 Canvas 的fillStyle中都有效 - 注意：Canvas 的
fillStyle支持rgba()字符串、十六进制（不带 alpha）、hsla()，但不支持 CSS 变量或currentcolor
WebGL（如 Three.js）中透明物体必须开启深度测试与混合
HTML5 可视化一旦进入 3D，透明度就不再是“设个值就行”的事。Three.js 中设置 material.transparent = true 后，若没配对启用混合模式，物体会显示为黑色或完全消失。
立即学习“前端免费学习笔记（深入）”；
- 必须显式设置：
material.opacity = 0.6;+material.transparent = true; - 默认混合模式是
THREE.NormalBlending，多数情况够用；但若出现前后顺序错乱（远的盖近的），要检查渲染顺序，必要时用material.depthWrite = false; - 透明物体不要和 opaque 物体混在同一个 Group 并共用材质，否则可能触发非预期的排序或裁剪
可视化库（ECharts / AntV）里改透明度优先查配置项而非硬写 CSS
ECharts 的 itemStyle.opacity、lineStyle.opacity 或 AntV G2 的 style.fillOpacity 都是内置支持的字段，比在 DOM 上加 opacity 更安全——后者可能把图例、坐标轴、文字全变淡，破坏可读性。
- 例如折线图点透明：
series: [{ itemStyle: { opacity: 0.3 } }] - 柱状图渐变填充中控制透明度，应写在
color: { type: 'linear', ... }的 stop 颜色里，用rgba() - 切忌对
.echarts-container直接设 CSSopacity，会导致 tooltip 交互变弱甚至失效
真正麻烦的是多层叠加时的透明度叠加效应——比如 Canvas 绘制层 + SVG 图标层 + CSS 遮罩层，各自 alpha 相乘后可能远低于预期。这种场景下，与其反复调试数值，不如把部分视觉效果提前烘焙进图片或使用 ctx.globalCompositeOperation 控制合成模式。
