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

Posted 2023-02-16

【中文标题】如何在 html5 中制作透明画布？

【英文标题】：How do I make a transparent canvas in html5?

【发布时间】：2011-06-16 10:55:54

【问题描述】：

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

【参考方案1】：

如果您要导出画布，请记住导出为png！！

去过那里，但失败了 xD

【参考方案2】：

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

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

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

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

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

【讨论】：

画布在移动设备上具有黑色背景，因此分层画布在那里不起作用。 （至少在 Chrome for android 上）

标准就这么多了，像往常一样。

我认为这些答案没有抓住重点。与上面的问题类似，我想要两个分层的画布：底部有一个静态图像，但顶部有动画精灵。这个顶层需要有一个透明的背景，但也必须“清除”并在每个动画帧中重新绘制。是的，默认情况下它开始透明，但是如何将它重置为透明并开始每个新动画帧？

这是随时清除画布的方法：***.com/questions/2142535/…

既然你有这么多赞成票，你至少也能回答一下这个问题吗？如何让不透明的画布透明？

【参考方案3】：

fillStyle 可能不是您想要的，因为它无法真正清除画布；它会用纯色或不绘制任何东西的透明颜色来绘制它。

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

canvas.width = canvas.width

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

【参考方案4】：

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

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

【参考方案5】：

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

#canvasID
    background:transparent;

【讨论】：

这个答案并不适用于所有情况，context.clearRect(0, 0, width, height) 是适合我的解决方案

【参考方案6】：

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

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

我不确定，但看起来背景颜色是从正文中继承为透明的。

【参考方案7】：

将两个画布绘制到第三个画布上。

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

【参考方案8】：

如果您希望特定的<canvas id="canvasID"> 始终透明，您只需设置

#canvasID
    opacity:0.5;

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

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

【讨论】：

啊，我在寻找 fillStyle 透明度。谢谢！

仅供参考：如果画布中有背景填充，opacity 更改将无效。