javascript - 使用 Javascript/CSS 在 PNG 中绘制所有像素(不包括透明像素)？

Question

我需要使用 Javascript/CSS 创建 PNG 的剪影。这可能吗？

我尝试了以下方法:使用绝对定位和 z-index 多次堆叠不透明度降低的 PNG。这是行不通的。

不幸的是，除了 Javascript 和 CSS，我不会使用 PHP 或其他东西。

我对叠加等有一些想法，但我不知道如何去做。有什么建议吗？

更新:这只需要在 webkit 浏览器中工作，所以你可以带上你的 webkit trickbox! :)

Answer 1

这在纯 HTML/CSS 中是不可能的。

在嵌入式 SVG 中使用 filter 是可能的例如 feColorMatrix将所有 channel 设置为一种颜色(不透明度除外)。

在 <canvas> 中是可能的使用 composite operation ，例如先绘制图像，然后使用 source-out 在顶部绘制单一颜色模式。

可能在 IE 中使用 MaskFilter ，使用 MaskFilter 生成覆盖固定颜色(例如黑色)的掩蔽颜色(例如白色)。但是我认为您会失去任何可变不透明度的平滑边缘。

这将是很多浏览器嗅探和烦恼。我会尽量避免它。