html - HTML5 中的画布填充样式无

Question

我想在画布上不填充任何颜色，即我希望背景 div 颜色应继续显示在 div 中。我用谷歌搜索了它，但没有找到任何解决方案来保持 fillStyle 没有颜色。

我也尝试省略填充样式，但它给我留下了黑色。

有什么可用的选项吗？

谢谢

Answer 1

我不知道你想做什么，但似乎你想让你的画布变得透明。你可以在 JavaScript 中做到这一点：

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

或者在 CSS 中，foocanvas 元素的 id 在哪里。请注意，这将使元素本身透明，而不仅仅是它的内容。

#foo {
    opacity: 0;
}

Answer 2

您需要使用它来清除画布：

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

（或您需要的矩形）。

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

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

context.globalCompositeOperation = 'destination-out';

（xor并且source-out也可以在一定程度上用于删除现有像素，但有一些变化）。

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

Answer 3

你需要清除你的画布，而不是绘制透明度......想想看。您无法清洁玻璃，通过使用透明涂料，同样适用于<canvas>元素。

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

这个画布演示做了一个非常简单的

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

在它绘制任何东西之前，从而保持画布透明度。