javascript - HTML5 是否支持任何类型的多边形遮罩？

Question

我很好奇是否有可能（使用画布或 CSS）在 JPG 或 PNG 上放置蒙版以使其某些部分透明。具体来说，我想在图像上定义一个圆圈，并让该圆圈内的像素保持不透明，但让图像的所有其他部分变得透明。

我是 Java，这是一个相当简单的操作，但我在 Javascript 中没有找到任何类似的东西，我想知道这是否根本不可能。

TIA

score 1 · Accepted Answer

只需从 css 技巧中查看这个-webkit-mask 教程。

CSS

.circle-mask {
    -webkit-mask-box-image: url(mask.png);
}

结果

CSS 掩码

相关链接：

score 0 · Accepted Answer

您可以使用SVG 过滤器来创建类似“混合模式”的东西。您可以使用 ie Inkscape 来组合这些效果。如果您熟悉语法，您可以创建很多效果。或许你可以张贴一张想要效果的图片，比它应该更容易看到可以做什么。还有一些 js 库可以对图像进行某些效果。

score 0 · Accepted Answer

您还可以使用 SVG 中的mask标签来实际放置具有不同渐变的圆圈图像，看看这是否有帮助？

3 回答 3