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

Question

如何使画布透明？我需要这样做，因为我想将两幅画布叠放在一起。

原文由 Urmelinho 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

画布默认是透明的。

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

将画布想象成 在玻璃板上作画。

要在画布上绘制后清除画布，只需使用 clearRect ：

 const context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);

原文由 Omiod 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

原文由 J Sprague 发布，翻译遵循 CC BY-SA 3.0 许可协议