Canvas 默认透明，但“不透明”常因父容器背景色、globalAlpha误用或绘制覆盖导致；Three.js需alpha:true+setClearColor(0x000000,0)；html2canvas导出透明PNG须设backgroundcolor:null。
Canvas 元素本身默认就是透明的，但“看起来不透明”往往是因为父容器或 body 有背景色，或者你误用了 globalAlpha 去试图控制 canvas 整体透明度——它只影响后续绘制内容，不改变 canvas 像素缓冲区的 alpha 通道。
canvas 元素的 background: transparent 生效前提
CSS 的 background: transparent 对 canvas 元素生效，但仅限于「canvas 自身未被绘制内容填满」时才真正透出底层。常见失效场景：
- 父容器（比如
<div class="bg">）设置了background-color: #fff，盖住了 canvas 底层 -
<body>或<html>有默认或显式背景色（尤其某些重置样式库会设body { background: #fff }） - JS 中调用了
ctx.fillRect(0, 0, width, height)填满画布且用了不透明颜色 - 使用了
globalAlpha = 0.8后又 fillRect，导致整块区域半透——这不是背景透明，是绘制内容半透
Three.js 场景中 canvas 透明必须配 alpha: true
如果你用 Three.js 渲染粒子，只写 canvas { background: transparent } 是没用的。WebGL 上下文默认关闭 alpha 通道，CSS 再透明也透不出去：
- 创建渲染器时必须传
{ alpha: true }：new THREE.WebGLRenderer({ alpha: true }) - 紧接着要调用
renderer.setClearColor(0x000000, 0)，第二个参数0是 alpha 值，不是颜色 - 漏掉
alpha: true，setClearColor设成(0, 0, 0, 0)也无效——清屏操作根本不会写入 alpha 通道 - iOS Safari 15.4 之前版本对
alpha: true支持不稳定，若出现闪烁或纯黑，可临时降级为{ alpha: false, premultipliedAlpha: false }并手动处理颜色逻辑
html2canvas 输出透明 PNG 必须设 backgroundcolor: null
当你用 html2canvas 截图带粒子动画的区域，并希望结果是透明底 PNG，关键不在 CSS，而在 JS 配置：
立即学习“前端免费学习笔记（深入）”；
-
backgroundcolor: null是强制开关，设成'transparent'或undefined都不行 - 输出必须用
toDataURL('image/png')；image/jpeg格式天然不支持透明，哪怕配置正确也会变黑底 - 若截图区域含跨域图片，需额外加
useCORS: true，否则部分浏览器会因安全策略拒绝读取像素，导致空白或黑块 - scale ≥ 2 可缓解文字/细线锯齿，但会显著增加内存占用，粒子密集时慎用过高值
粒子动画中 globalAlpha 和 rgba() 的取舍
globalAlpha 不是“让 canvas 透明”，而是批量降低所有后续绘制操作的不透明度。它适合：
- 做 UI 图层淡入：一次性设
ctx.globalAlpha = 0.3，再 drawImage 多个图标 - 粒子系统整体雾化：比逐个设
fillStyle = 'rgba(255,255,255,0.3)'略快（少字符串解析），但差异仅在数百粒子/帧时可测 - 不能用它实现“canvas 背景透出 + 粒子半透”的混合效果——因为
globalAlpha会同时作用于粒子和连线，无法单独控制背景可见性 - 它不支持 CSS transition，动画必须靠 requestAnimationFrame 手动插值更新
真正决定 canvas 是否透出页面背景的，始终是三层叠加：CSS 层（canvas 及其祖先的 background）、WebGL/2D 上下文初始化选项（alpha: true）、以及 JS 绘制逻辑是否主动覆盖全画布。三者缺一，都可能让你调试半小时却只看到一块白底或黑底。
