Html 如何在 html5 中制作透明画布？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4815166/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I make a transparent canvas in html5?
提问by Urmelinho
How can I make a canvas transparent? I need to because I want to put two canvases on top of one another.
如何使画布透明？我需要这样做，因为我想将两个画布叠在一起。
回答by Omiod
Canvases are transparent by default.
默认情况下，画布是透明的。
Try setting a page background image, and then put a canvas over it. If nothing is drawn on the canvas, you can fully see the page background.
尝试设置页面背景图像，然后在其上放置画布。如果画布上什么也没画，你就可以完整地看到页面背景。
Think of a canvas as like painting on a glass plate.
把画布想象成在玻璃板上作画。
回答by J Sprague
I believe you are trying to do exactly what I just tried to do: I want two stacked canvases... the bottom one has a static image and the top one contains animated sprites. Because of the animation, you need to clear the background of the top layer to transparent at the start of rendering every new frame. I finally found the answer: it's not using globalAlpha, and it's not using a rgba() color. The simple, effective answer is:
我相信您正在尝试做我刚刚尝试做的事情：我想要两个堆叠的画布……底部的一个有静态图像，顶部的一个包含动画精灵。由于动画的原因，您需要在开始渲染每个新帧时将顶层的背景清除为透明。我终于找到了答案：它没有使用 globalAlpha，也没有使用 rgba() 颜色。简单有效的答案是：
context.clearRect(0,0,width,height);
回答by stecb
Iif you want a particular <canvas id="canvasID">to be always transparent you just have to set
如果你想要一个特定的<canvas id="canvasID">总是透明的，你只需要设置
#canvasID{
opacity:0.5;
}
Instead, if you want some particular elements inside the canvas area to be transparent, you have to set transparency when you draw, i.e.
相反，如果你希望画布区域内的某些特定元素是透明的，则必须在绘制时设置透明度，即
context.fillStyle = "rgba(0, 0, 200, 0.5)";
回答by Marcel Bomfim
Just set the background of the canvas to transparent.
只需将画布的背景设置为透明即可。
#canvasID{
background:transparent;
}
回答by Chris
Paint your two canvases onto a third canvas.
将您的两个画布绘制到第三个画布上。
I had this same problem and none of the solutions here solved my problem. I had one opaque canvas with another transparent canvas above it. The opaque canvas was completely invisible but the background of the page body was visible. The drawings from the transparent canvas on top were visible while the opaque canvas below it was not.
我遇到了同样的问题，这里的解决方案都没有解决我的问题。我有一个不透明的画布，上面有另一个透明的画布。不透明的画布完全不可见，但页面主体的背景是可见的。顶部透明画布上的绘图可见，而其下方的不透明画布则不可见。
回答by 1000Gbps
Can't comment the last answer but the fix is relatively easy. Just set the background color of your opaque canvas:
无法评论最后一个答案，但修复相对容易。只需设置不透明画布的背景颜色：
#canvas1 { background-color: black; } //opaque canvas
#canvas2 { ... } //transparent canvas
I'm not sure but it looks like that the background-color is inherited as transparent from the body.
我不确定，但看起来背景颜色是从身体继承为透明的。
