在前端开发中，有一些效果需要实现遮罩蒙版的效果，有几种方案，记录一下
CSS实现
css 中mask属性，最早是出现在Safari浏览器上的，可以追溯到09年
目前得到了大部分浏览器支持。在移动端需要加-webkit-使用
image.png
mask属性主要有
mask-border
mask-border-mode
mask-border-outset
mask-border-repeat
mask-border-slice
mask-border-source
mask-border-width
mask-clip
mask-composite
mask-image
mask-mode
mask-origin
mask-position
mask-repeat
mask-size
mask-type
mask 属性 上面属性的简称
一般用法，我们使用mask-image属性来配合使用
<div class="box">
</div>
<style>
.box {
background: #000;
width: 200px;
height: 100px;
-webkit-mask-image: linear-gradient(to right, rgba(0,0,0, 0) 0, rgba(0,0,0,1))
}
</style>
效果
叠加蒙版上的效果
注意这个属性要是设置全黑的话，可以实现剪切效果 与css 属性 clip 和clip-path 形成的结果相似
clip 和 clip-path 具体用法 见mdn
SVG 的MASK标签
svg中的mask标签锚点可以直接在css中引用起到添加蒙版的效果
eg:
<svg>
<defs>
<mask id="mask">
<rect x="0" y="0" width="100" height="200" fill="#000" />
</mask>
</defs>
</svg>
<style>
.box {
mask-image: url(#mask);
mask: url(#mask) // 对外链接的支持
}
</style>
canvas 实现
此处没有实现，不过作者有一些自己的想法，其实canvas中可以获取到rgba值，只要实现ps中蒙版的叠加算法，可以实现这个效果
未完待续，等实现了这个算法，我补上这个地方
