HTML5 中的画布填充样式无答案

【问题标题】：Canvas fillStyle none in HTML5HTML5 中的画布填充样式无
【发布时间】：2013-09-07 01:48:02
【问题描述】：

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

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

有什么选择吗？

谢谢

【问题讨论】：

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

【解决方案1】：

你需要用它来清除画布：

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

（或您需要的矩形）。

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

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

context.globalCompositeOperation = 'destination-out';

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

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

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

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

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

#foo {
    opacity: 0;
}

【讨论】：