如何在html5中制作透明的canvas？

我怎样才能使canvas透明？ 我需要，因为我想把两个canvas在另一个之上。

Answer 1

canvas默认是透明的。

尝试设置页面背景图像，然后在其上放置一个canvas。 如果canvas上没有绘制任何东西，则可以完全看到页面背景。

想象canvas就像在玻璃板上画画一样。

Answer 2

如果你想要一个特定的<canvas id="canvasID">总是透明的，你只需要设置

 #canvasID{ opacity:0.5; } 

相反，如果你想在canvas区域内的某些特定的元素是透明的，你必须设置透明度，当你画，即

 context.fillStyle = "rgba(0, 0, 200, 0.5)"; 

Answer 3

我相信你正在试图完成我刚才所做的工作：我想要两个堆叠的canvas…底部有一个静态图像，最上面的一个包含animation精灵。 由于animation，您需要清除顶层的背景，以便在渲染每个新帧时开始透明。 我终于find了答案：它不使用globalAlpha，也不使用rgba（）颜色。 简单而有效的答案是：

 context.clearRect(0,0,width,height); 

Answer 4

只需将canvas的背景设置为透明即可。

 #canvasID{ background:transparent; } 

Answer 5

把你的两个canvas涂在第三个canvas上。

我有这个相同的问题，没有解决scheme在这里解决了我的问题。 我有一个不透明的canvas，上面有另一个透明的canvas。 不透明的canvas完全看不见，但页面背景是可见的。 顶部透明canvas上的图画是可见的，而下面的不透明canvas则不是。

Answer 6

不能评论最后的答案，但修复相对容易。 只需设置不透明canvas的背景颜色即可：

 #canvas1 { background-color: black; } //opaque canvas #canvas2 { ... } //transparent canvas 

我不确定，但它看起来像背景颜色从身体透明inheritance。