HTML canvas的alpha属性用法？设置画布背景透明度实战-html教程-PHP中文网

ctx.globalalpha仅影响后续绘图操作的透明度，不改变canvas元素自身背景；其值需手动重置或配合save/restore隔离，作用对象是绘制内容而非像素缓冲区。

html canvas的alpha属性用法？设置画布背景透明度实战

canvas globalAlpha 是全局透明度，不是“画布背景”的透明度

直接设置 ctx.globalAlpha 不会改变 canvas 元素自身的背景（即 canvas 标签的底色），它只影响后续所有绘图操作的合成透明度。如果你看到 canvas 底部是白色或灰色，那其实是页面 body 背景透上来的——globalAlpha 对它完全无效。

常见错误现象：设了 ctx.globalAlpha = 0.3 后，期望整个 canvas 区域变半透，结果只是画上去的矩形、文字变淡，canvas 边框和空白处仍是实色。

canvas 元素默认是透明的（background-color: transparent），但浏览器渲染时若父容器无背景，就会显示为白底
要让 canvas “看起来”有透明背景，必须确保其父元素、body 甚至 HTML 都没有遮挡性的 background
globalAlpha 的作用对象是「绘制内容」，不是 canvas 像素缓冲区本身

用 globalAlpha 控制绘制内容透明度的正确姿势

它适用于批量绘制同透明度图形的场景，比如 UI 图层叠加、粒子系统、淡入动画等。值设为 0.0 到 1.0 之间，超出范围会被截断（如 1.5 等价于 1.0，-0.2 等价于 0.0）。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

每次修改 globalAlpha 都会影响之后所有 fillRect()、stroke()、drawImage()、fillText() 等操作
不支持 CSS 动画或 transition，只能靠 JS 动态赋值实现渐变效果
性能比逐个用 rgba() 设颜色略高（少一次字符串解析），但差异微乎其微，除非每帧绘制数百个图形
务必配合 ctx.save() / ctx.restore() 隔离作用域，否则容易污染后续绘制

示例：只让绿色矩形半透，红色和蓝色保持不透明

ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);

ctx.save(); // 保存当前状态（含 globalAlpha = 1.0）
ctx.globalAlpha = 0.4;
ctx.fillStyle = "green";
ctx.fillRect(30, 30, 50, 50);
ctx.restore(); // 恢复到 save 时的状态

ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 50, 50); // 这里 globalAlpha 仍是 1.0

想让“背景”也参与透明混合？别碰 globalAlpha

如果目标是让 canvas 内容与底层网页背景融合（比如做出毛玻璃、悬浮卡片效果），globalAlpha 无法达成。它只控制「新内容如何与 canvas 当前缓冲区混合」，而 canvas 缓冲区初始是全透明黑（alpha=0），所以第一次绘制永远按 source-over 合成。

真正起作用的是 canvas 元素自身的 CSS opacity 属性，但它会让整个 canvas（包括边框、滚动条等）一起变透明，且不可局部控制
更可控的方式是：用 rgba() 或 hsla() 给 fillStyle / strokeStyle 设颜色，比如 ctx.fillStyle = "rgba(255, 0, 0, 0.6)"
若需复杂遮罩（如图片挖空、不规则透明区域），得用 globalCompositeOperation 配合另一张 canvas 或 ImageData 操作