這篇文章將為大家詳細(xì)講解有關(guān)canvas中視頻遮罩插件的示例分析，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
一個(gè)長(zhǎng)視頻可能包含多個(gè)遮罩，每個(gè)遮罩有特定的顯示時(shí)間（在此時(shí)間外，隱藏該遮罩）。
前端實(shí)現(xiàn)視頻遮罩
有 基于div 和 基于canvas 兩種技術(shù)方案，本文是使用canvas完成的。
主要原理是在HTML的video標(biāo)簽上貼上一個(gè)透明的canvas圖層，然后響應(yīng)mousedown、mousemove、mouseup事件。 由于canvas事件只是基于canvas元素，所以canvas內(nèi)部每個(gè)元素（一個(gè)矩形，一個(gè)圓等）的事件響應(yīng)要利用坐標(biāo)來自己代碼完成。
插件GitHub地址
https://github.com/cunzaizhuyi/maskPlugin
實(shí)現(xiàn)的功能點(diǎn)
畫遮罩（矩形）
設(shè)置遮罩樣式（提供API）
遮罩移動(dòng)
遮罩縮放
canvas上鼠標(biāo)樣式變換
封裝的API
| 名稱 | 值類型 | 說明 |
|---|---|---|
| 1、矩形相關(guān)設(shè)置 | ||
| fillStyle | 顏色值 | 矩形填充色, 默認(rèn)為'#eeeeee' |
| strokeStyle | 顏色值 | 矩形邊界線顏色, 默認(rèn)為'#0000ff' |
| inRectCursor | 字符串 | 當(dāng)鼠標(biāo)處于某個(gè)小矩形內(nèi)部時(shí)鼠標(biāo)樣式，默認(rèn)為'move'?？梢栽O(shè)置為'pointer'之類的。 |
| 2、矩形邊界上的八個(gè)小矩形 相關(guān)設(shè)置 | ||
| bRectsStrokeStyle | 顏色值 | 矩形邊界上的小矩形的顏色，默認(rèn)為'#0000ff' |
| bSideLength | number | 矩形邊界上小矩形的邊長(zhǎng)值，默認(rèn)為6 |
| 3、遮罩時(shí)間相關(guān) | ||
| masksTime | 每個(gè)遮罩的開始顯示時(shí)間和結(jié)束顯示時(shí)間，一個(gè)遮罩對(duì)應(yīng)一個(gè)矩形 |
masksTime舉例：
重慶分公司
重慶分公司
[{
maskId: 1,
startTime: 0,
endTime: 10,
}, {maskId: 2,
startTime: 3,
endTime: 13,
}]最后
這個(gè)基于原生canvas的700多行的小插件，對(duì)于探索canvas的世界可能僅僅是一個(gè)開始。
關(guān)于“canvas中視頻遮罩插件的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。
