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

如果你想要一个特定的 <canvas id="canvasID">总是透明的，你只需要设置

#canvasID{
opacity:0.5;
}

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

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

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

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

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

要在画布上画完后清理它，只需使用 clearRect:

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

在第三块画布上画你的两块画布。

我也遇到过同样的问题，但没有一个解决方案能解决我的问题。我有一块不透明的画布，上面还有一块透明的画布。不透明的画布是完全不可见的，但是页面主体的背景是可见的。顶部透明画布上的图案清晰可见，而下面的不透明画布则看不见。

不能注释最后一个答案，但是修复相对容易。只需设置不透明画布的背景颜色:

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

我不确定，但看起来背景颜色是遗传的透明的身体。

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

#canvasID{
background:transparent;
}

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

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

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

我所使用的技巧依赖于关于 <canvas></canvas>的实现细节。它们在调整大小时“重置”(在 Chrome 和 Firefox 上测试) :

canvas.width = canvas.width

这种现象最初让我觉得非常讨厌，但它也成为了我所知道的唯一一种硬重置画布的方法。

如果你正在输出你的画布，记得输出为 png! ！

我也经历过，但在 XD 上失败了

这里有一个关于画布默认透明度概念的最小证明，并使用 position: absolute将它们叠加在一起:

const canvases = [...Array(4)]
.map(() => document.createElement("canvas"));


canvases.forEach((canvas, i) => {
document.body.appendChild(canvas);
const ctx = canvas.getContext("2d");
const saturation = 100 / canvases.length * (i + 1);
ctx.strokeStyle = `hsl(160, ${saturation}%, 60%)`;
ctx.lineWidth = 10;
ctx.strokeRect(i * 50 + 10, i * 15 + 10, 100, 80);
});

canvas {
position: absolute;
border: 1px solid black;
}