HTML5中的Canvas fillStyle none。

Question

我希望在画布上不填充任何颜色，即我希望背景div的颜色可以继续显示在div中。我已经搜索了谷歌，但没有找到保留fillStyle为无颜色的解决方案。同时，我尝试省略fillStyle，但会给我留下黑色。

是否有其他选项可用？

谢谢

- codeomnitrix

---

你不能使用 canvas.fillStyle = "transparent" 吗？ - PlantTheIdea

画布的默认“颜色”是透明的。如果您在画布上绘制了一些内容，并希望擦除整个画布以让底层div再次显示，请使用context.clearRect(0,0,canvas.width,canvas.height)。如果您想绘制一个内部未填充的图形，请省略context.fill()，只需使用context.stroke()。如果您想使用绘图来“擦除”画布上已有的内容，请设置context.globalCompositeOperation="destination-out"，您的新绘图将作为橡皮擦，使背景div显示出来。 - markE

Answer 1

我不知道你想要做什么，但看起来你想让你的画布变得 透明。您可以通过JavaScript实现：

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

在CSS中，foo将是画布元素的id。请注意，这将使元素本身透明，而不仅仅是其内容。

#foo {
    opacity: 0;
}

- federico-t

---

opacity:0; 这一段会使整个画布变透明，而不是背景颜色。 - PlantTheIdea

@PlantTheldea 没错。根据 OP 想要做什么，那可能是解决方案。 - federico-t

Answer 2

您需要使用此命令来清除画布：

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

或者你需要的矩形。

同时确保canvas元素的背景没有设置CSS规则（如果在初始化时canvas不是透明的，则可能会出现这种情况，因为canvas默认是透明的）。

如果您需要清除非正常形状，可以使用合成模式：

context.globalCompositeOperation = 'destination-out';

(xor和source-out也可以用来一定程度上去除现有像素，但可能存在一些变化）。

这将以您绘制的下一个形状（路径）的形式清除画布（或使用实心像素的图像将清除画布）。

- user1693593

Answer 3

你需要清除画布，而不是绘制透明度...想一想。你不能用透明的油漆来清洁玻璃，同样的道理也适用于<canvas>元素。

http://jsfiddle.net/Z6XTg/1/

这个画布演示非常简单

ctx.clearRect(0,0,canvas.width,canvas.height);

在绘制任何内容之前，保持画布的透明度。

- ericjbasti