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

Question

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

Answer 1

默认情况下，画布是透明的。

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

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

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);

Answer 4

只需将画布的背景设置为透明。

#canvasID{
    background:transparent;
}

Answer 5

将两幅画布画到第三幅画布上。

我遇到了同样的问题，这里没有解决方案解决了我的问题。我有一个不透明的画布，上面有另一个透明画布。不透明的画布完全不可见，但页面主体的背景是可见的。顶部透明画布上的图纸是可见的，而下面的不透明画布则不是。

Answer 6

无法评论最后一个答案，但修复相对容易。只需设置不透明画布的背景颜色：

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

我不确定，但看起来背景颜色从身体继承为透明。

Answer 7

fillStyle 可能不是您要查找的内容，因为它无法真正清除画布；它将使用纯色或不绘制任何内容的透明颜色绘制它。

对我有用的技巧依赖于有关 <canvas></canvas> 的实现细节。它们在调整大小时“重置”（在 Chrome 和 Firefox 上测试）：

canvas.width = canvas.width

这种现象最初让我觉得很烦人，但它也成为我所知道的硬重置画布的唯一方法。