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

Question

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

我是Java这是一个相当直接的操作，但我没有在Javascript中找到任何模拟，我想知道这是不可能的。

TIA

Answer 1

只需从css技巧中查看-webkit-mask tutorial。

<强> CSS

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

RESULT

相关链接：

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

Answer 2

您可以使用SVG filters创建类似»混合模式«的内容。您可以使用Inkscape来组合这些效果。如果您熟悉语法，则可以创建很多效果。也许您可以发布所需效果的图像，而不是应该更容易看到可以做什么。还有一些js库可以对图像产生某些效果。

Answer 3

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