192 默认情况下，画布是透明的。 尝试设置页面背景图像，然后在其上放置画布。如果画布上未绘制任何内容，则可以完全看到页面背景。 可以将画布视为在玻璃板上绘画。 — 奥米德 source 5 画布在移动设备上具有黑色背景，因此在此处无法对画布进行分层。（至少在适用于Android的Chrome浏览器上） — 于 11 像往常一样，对于标准而言是如此。 — Triynko 6 我认为这些答案没有抓住重点。与以上问题类似，我希望有两层画布：最下面的画布具有静态图像，最上面的画布具有动画子画面。该顶层需要具有透明背景，但还必须“清除”并在每个动画帧中重新绘制。是的，默认情况下它开始透明，但是如何将其重置为透明以及每个新动画帧的开始？ — J Sprague 3 这是随时清除画布的方法：stackoverflow.com/questions/2142535/…– — Omiod 由于您的投票太多，您至少也可以回答这个问题吗？如何使不透明的画布透明？ — DDD
47 我相信您正在尝试完全按照我的意愿去做：我想要两张堆叠的画布……最下面的一个具有静态图像，最上面的一个包含动画精灵。由于动画的原因，您需要在渲染每个新帧的开始时将顶层的背景清除为透明的。我终于找到了答案：它没有使用globalAlpha，也没有使用rgba（）颜色。简单有效的答案是： context.clearRect(0,0,width,height); — 斯普拉格 source
44 如果您希望某个特定商品<canvas id="canvasID">始终保持透明，则只需设置 #canvasID{ opacity:0.5; } 相反，如果希望画布区域内的某些特定元素是透明的，则在绘制时必须设置透明度，即 context.fillStyle = "rgba(0, 0, 200, 0.5)"; — stecb source 啊，我在找fillStyle透明度。谢谢！ — Workman 2 仅供参考：opacity如果画布中有背景填充，更改将无效。 — 亚当·埃伯林
3 只需将画布的背景设置为透明即可。 #canvasID{ background:transparent; } — 马塞尔·邦芬（Marcel Bomfim） source 1 此答案并非在所有情况下都有效，context.clearRect（0，0，width，height）是对我 — 有用
2 将您的两个画布绘制到第三个画布上。 我遇到了同样的问题，这里没有解决方案可以解决我的问题。我有一个不透明的画布，上面有另一个透明的画布。不透明的画布是完全不可见的，但是页面主体的背景是可见的。可以看到顶部透明画布上的图形，而下面的不透明画布则不可见。 — 克里斯 source
0 无法评论最后的答案，但修复相对容易。只需设置不透明画布的背景颜色即可： #canvas1 { background-color: black; } //opaque canvas #canvas2 { ... } //transparent canvas 我不确定，但看起来背景色是从身体继承为透明的。 — 1000Gbps的 source