作者：云凰杯青作者博客视频遮罩介绍给视频添加遮罩，从而遮挡视频的某个区域，在某个时间段内视频，比如第10到20分钟不显示划定区域。应用场景包括屏蔽卫星电视图标、屏蔽视频右下角的广告、充当马赛克等。一个长视频可能包含多个遮罩，每个遮罩都有特定的显示时间（除此时间外，掩码被隐藏）。前端视频遮罩有基于div和基于canvas两种技术方案。本文使用canvas完成。主要原理是在html视频标签上粘贴一个透明的canvas层，然后响应mousedown、mousemove、mouseup事件。由于canvas事件仅基于canvas元素，canvas内部的每个元素（矩形、圆形等）的事件响应必须由自己的代码使用坐标完成。插件GitHub地址https://github.com/cunzaizhuy...Demo地址http://htmlpreview.github.io/?https://github.com/cunzaizhuyi/maskPlugin/blob/master/mask/mask.html实现了点画蒙版（矩形）设置蒙版样式（提供API）蒙版移动蒙版缩放鼠标样式变换封装在画布上API名称值说明type1.矩形相关设置fillStylecolorvalue矩形填充颜色，默认为'#eeeeee'strokeStylecolorvalue矩形边框线颜色，默认为'#0000ff'inRectCursorstring当鼠标在小矩形内时鼠标样式，默认为'移动'。可以设置为类似“指针”的东西。2.设置矩形边界上的八个小矩形bRectsStrokeStylecolorvalue矩形边界上小矩形的颜色，默认为'#0000ff'bSideLengthnumber矩形边界上小矩形的边长值rectangle，默认为63，masksTime每个mask的开始显示时间和结束显示时间，一个mask对应一个矩形masksTime例子：[{maskId:1,startTime:0,endTime:10,},{maskId:2,startTime:3,endTime:13,}]应用渲染最后一个700多行的基于原生canvas的小插件，可能只是探索canvas世界的开始。如果您对这个小插件有任何疑问，欢迎交流。
