溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關canvas中視頻遮罩插件的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
一個長視頻可能包含多個遮罩，每個遮罩有特定的顯示時間（在此時間外，隱藏該遮罩）。
前端實現視頻遮罩
有 基于div 和 基于canvas 兩種技術方案，本文是使用canvas完成的。
主要原理是在HTML的video標簽上貼上一個透明的canvas圖層，然后響應mousedown、mousemove、mouseup事件。 由于canvas事件只是基于canvas元素，所以canvas內部每個元素（一個矩形，一個圓等）的事件響應要利用坐標來自己代碼完成。
插件GitHub地址
https://github.com/cunzaizhuyi/maskPlugin
實現的功能點
畫遮罩（矩形）
設置遮罩樣式（提供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的世界可能僅僅是一個開始。
關于“canvas中視頻遮罩插件的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
