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

Question

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

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

TIA

Answer 1

只需检查这个 -webkit-mask tutorial来自 css 技巧。

CSS

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

结果

相关链接:

• > CSS3 -webkit-mask property.
• > Using an Image as a Mask
• > -webkit-mask-image