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

Question

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

Answer 1

画布默认是透明的。

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

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

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

clearRect

:

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

Answer 2

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

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

Answer 3

如果您希望特定的

<canvas id="canvasID">

始终透明，您只需设置

#canvasID{
    opacity:0.5;
}

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

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

Answer 4

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

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

Answer 5

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

#canvasID{
    background:transparent;
}

Answer 6

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

png

!!

去过那里，但失败了xD

Answer 7

这是画布默认透明度的最小概念证明，并使用

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 * 60 + 10.5, // x
    i * 15 + 10.5, // y
    100, // w
    80,  // h
  );
});

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

Answer 8

fillStyle

可能不是您正在寻找的，因为它无法真正清除画布；它要么用纯色绘制，要么用不绘制任何东西的透明颜色绘制。

对我来说的技巧依赖于关于

<canvas></canvas>

的实现细节。调整大小时它们会“重置”（在 Chrome 和 Firefox 上测试）：

canvas.width = canvas.width

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

Answer 9

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

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

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