使用蒙版（mask）来实现一些惊艳的视觉效果，这个技术已经存在很多年了，不过随着浏览器对蒙版（mask）的支持越来越好，最近在web开发中使用蒙版（mask）也变得越来越流行。

本文找了一些使用SVG或者是Canvas蒙版（mask）的实例，展示了蒙版的一些经典的使用方法。

1、文字蒙版（Text Masking）

上面的这个简单的实例是使用了文字蒙版（mask）来实现的，还可以把文字更改你想显示的任意文字。

上面这个实例的效果只需要使用到CSS中的background-clip这个属性就可以做到。可以使用任何你想显示的文字，当然要配合你需要显示的背景图片。至于图片放大缩小的效果，更加简单，使用一点点CSS就可以实现了。

demo

2、多边形蒙版（mask）

demo

上面这个实例使用JavaScript来实现的，虽然动画有点复杂，但都是通过canvas来实现的。效果确实非常惊艳。

上面效果中的多边形蒙版（mask）遮罩效果的设计确实非常独特，至少是我见到的独特的设计。主要使用了JavaScript来创建这些形状作为蒙版（mask）来对背景图片进行遮罩。

上面使用canvas作为一个大的容器以JavaScript驱动来做动画，跟SVG动画的概念差不多。只要发挥你的想象力，可以做出更多有趣的动画效果。

3、图片蒙版（mask）

demo

这个实例是使用CSS中的蒙版（mask）图片来实现的。仔细观察下图片在使用蒙版（mask）前和使用蒙版（mask）后的效果，可以发现使用了蒙版（mask）后的照片在边缘处明显是有一些喷溅的效果。

这张作为蒙版（mask）的图片是一张PNG图片。这张PNG有些地方是透明的还有些是半透明，而蒙版（mask）是支持半透明的，所以把它作为蒙版（mask）来对图片进行遮罩的话，透明区域不显示图片内容而显示底部的背景。半透明区域则会显示图片的内容，只不过会加一点半透明的效果，所以才会出现图中所示的喷溅的视觉效果。