為一個影片添加一個覆蓋物，從而阻擋影片某個區域，在影片的某一時間段，例如第10到第20分鐘不顯示劃定的這塊區域。應用程式場景包括遮擋衛視圖標、 遮擋影片右下角廣告、 充當馬賽克等。
一個長視頻可能包含多個遮罩，每個遮罩有特定的顯示時間（在此時間外，隱藏該遮罩）。
前端實現視訊遮罩有基於div 和基於canvas 兩種技術方案，本文是使用canvas完成的。
主要原理是在HTML的video標籤上貼上透明的canvas圖層，然後回應mousedown、mousemove、mouseup事件。 由於canvas事件只是基於canvas元素，所以canvas內部每個元素（一個矩形，一個圓等）的事件回應要利用座標來自己程式碼完成。
插件GitHub地址https://github.com/cunzaizhuyi/maskPlugin
演示地址
http://htmlpreview.github.io/?https://github.com/cunzaizhuyi/maskPlugin/blob/master/mask/mask.html
實現的功能點| 名稱 | 值類型 | 說明 |
|---|---|---|
| 1、矩形相關設置 | ||
| fillStyle | 顏色值 | 矩形填滿色, 預設為'#eeeeee' |
| strokeStyle | 顏色值 | 矩形邊界線顏色, 預設為'#0000ff' |
| inRectCursor | 字串 | 當滑鼠處於某個小矩形內部時滑鼠樣式，預設為'move'。可以設定為'pointer'之類的。 |
| 2.矩形邊界上的八個小矩形相關設置 | ||
| bRectsStrokeStyle | 顏色值 | 矩形邊界上的小矩形的顏色，預設為'#0000ff' |
| bSideLength | number | 矩形邊界上小矩形的邊長值，預設為6 |
| 3.遮罩時間相關 | ||
| masksTime | 每個遮罩的開始顯示時間和結束顯示時間，一個遮罩對應一個矩形 |
[{ maskId: 1, startTime: 0, endTime: 10,}, {maskId: 2, startTime: 3, endTime: 13,}]最後這個基於原生canvas的700多行的小插件，對於探索canvas的世界可能只是一個開始。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。