如何在html5中制作透明画布？

Question

如何使画布透明？我需要因为我想把两幅画布放在一起.

Answer 1

画布默认是透明的.

尝试设置页面背景图像,然后在其上放置画布.如果画布上没有绘制任何内容,则可以完全查看页面背景.

想象画布就像在玻璃板上画画一样.

像往常一样,标准如此之多. (9认同)
画布在移动设备上具有黑色背景，因此在那里分层画布不起作用。（至少在 Chrome for Android 上） (6认同)
我认为这些答案都没有提到.与上面的问题类似,我希望有两个分层的画布:底部有一个静态图像,但最上面的一个将有动画精灵.此顶层需要具有透明背景,但也必须"清除"并重新绘制每个动画帧.是的,它默认开始透明,但是如何将其重置为透明和每个新动画帧的开始？ (5认同)
诚然.用于画布覆盖的Codepen:http://codepen.io/anon/pen/Kzcjl (3认同)
这是如何随时清除画布:http://stackoverflow.com/questions/2142535/how-to-clear-the-canvas-for-redrawing (3认同)

Answer 2

如果你想让一个特定的东西<canvas id="canvasID">始终透明,你只需要设置即可

#canvasID{
    opacity:0.5;
}

相反,如果您希望画布区域内的某些特定元素是透明的,则必须在绘制时设置透明度,即

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

Answer 3

我相信你正在尝试做我刚刚尝试做的事情:我想要两个堆叠的画布......底部有一个静态图像,顶部有一个动画精灵.由于动画,您需要在渲染每个新帧时将顶层的背景清除为透明.我终于找到了答案:它不使用globalAlpha,而且它没有使用rgba()颜色.简单有效的答案是:

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