作者：雲荒杯傾
作者部落格
視訊遮罩介紹
為一個視訊新增一個覆蓋物，從而擋住視訊某區域，在視訊的某一時間段，比如第10到第20分鐘不顯示劃定的這塊區域。應用場景包括遮擋衛檢視標、遮擋視訊右下角廣告、充當馬賽克等。
一個長視訊可能包含多個遮罩，每個遮罩有特定的顯示時間（在此時間區間外，隱藏該遮罩）。
前端實現視訊遮罩
有基於div和基於canvas兩種技術方案，本文是基於canvas完成的。
主要原理是在HTML的video標籤上貼上一個透明的canvas圖層，然後響應mousedown、mousemove、mouseup事件。
由於canvas事件只是基於canvas元素本身，所以canvas內部每個元素（一個矩形，一個圓等）的事件響應要利用座標來自己程式碼完成。
由於canvas每次重繪都要清屏，所以還要維護一個已畫遮罩的列表。
外掛使用ES6 Class寫法完成。使用的時候，直接new Mask（param）即可。
外掛GitHub地址
https://github.com/cunzaizhuyi/maskPlugin
演示地址
http://htmlpreview.github.io/？https://github.com/cunzaizhuyi/maskPlugin/blob/master/mask/mask.html
實現的功能點
- 畫遮罩（矩形）
- 給遮罩填充文字
- 設定遮罩樣式（提供API）
- 遮罩移動
- 遮罩縮放
- canvas上滑鼠樣式變換
封裝的API
封裝了一些外部介面，供呼叫。
| 名稱 | 值型別 | 說明 |
|---|---|---|
| 1、矩形相關設定 | ||
| fillStyle | 顏色值 | 矩形填充色, 預設為'#eeeeee' |
| strokeStyle | 顏色值 | 矩形邊界線顏色, 預設為'#0000ff' |
| inRectCursor | 字串 | 當滑鼠處於某個小矩形內部時滑鼠樣式，預設為'move'。可以設定為'pointer'之類的。 |
| 2、矩形邊界上的八個小矩形 相關設定 | ||
| bRectsStrokeStyle | 顏色值 | 矩形邊界上的小矩形的顏色，預設為'#0000ff' |
| bSideLength | number | 矩形邊界上小矩形的邊長值，預設為6 |
| 3、遮罩時間相關 | ||
| masksTime | 每個遮罩的開始顯示時間和結束顯示時間，一個遮罩對應一個矩形 |
masksTime舉例：
[{
maskId: 1,
startTime: 0,
endTime: 10,
}, {maskId: 2,
startTime: 3,
endTime: 13,
}]
複製程式碼應用效果圖
最後
這個基於原生canvas的700多行的小外掛，對於探索canvas的世界可能僅僅是一個開始。
關於這個小外掛有任何疑問，歡迎大家交流。