資訊專欄INFORMATION COLUMN
摘要：一個長視頻可能包含多個遮罩，每個遮罩有特定的顯示時間在此時間外，隱藏該遮罩。前端實現視頻遮罩有基于和基于兩種技術方案，本文是使用完成的。由于事件只是基于元素，所以內部每個元素一個矩形，一個圓等的事件響應要利用坐標來自己代碼完成。
作者：云荒杯傾
作者博客
為一個視頻添加一個覆蓋物，從而擋住視頻某區域，在視頻的某一時間段，比如第10到第20分鐘不顯示劃定的這塊區域。應用場景包括遮擋衛視圖標、遮擋視頻右下角廣告、充當馬賽克等。
一個長視頻可能包含多個遮罩，每個遮罩有特定的顯示時間（在此時間外，隱藏該遮罩）。
前端實現視頻遮罩有基于div和基于canvas兩種技術方案，本文是使用canvas完成的。
主要原理是在HTML的video標簽上貼上一個透明的canvas圖層，然后響應mousedown、mousemove、mouseup事件。
由于canvas事件只是基于canvas元素，所以canvas內部每個元素（一個矩形，一個圓等）的事件響應要利用坐標來自己代碼完成。
https://github.com/cunzaizhuy...
演示地址http://htmlpreview.github.io/？https://github.com/cunzaizhuyi/maskPlugin/blob/master/mask/mask.html
實現的功能點畫遮罩（矩形）
設置遮罩樣式（提供API）
遮罩移動
遮罩縮放
canvas上鼠標樣式變換
封裝的API| 名稱 | 值類型 | 說明 |
|---|---|---|
| 1、矩形相關設置 | ||
| fillStyle | 顏色值 | 矩形填充色, 默認為"#eeeeee" |
| strokeStyle | 顏色值 | 矩形邊界線顏色, 默認為"#0000ff" |
| inRectCursor | 字符串 | 當鼠標處于某個小矩形內部時鼠標樣式，默認為"move"?？梢栽O置為"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的世界可能僅僅是一個開始。
關于這個小插件有任何疑問，歡迎大家交流。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90617.html
摘要：谷歌是通過來實現這個組件的，比較復雜谷歌的工具加載文件和截圖文件有興趣的同學可以看一下。高亮區域核心部分截圖搞定了，接下來就是高亮區域了。 幾乎所有的APP應用包括Web應用都需要一個意見反饋，這樣才能了解用戶對產品的意見和建議，以便于不斷提升完善自己的產品。目前的反饋組件一般有兩種，一種是打開一個反饋頁面填寫表單，另一種則是通過彈窗來完成，相比較而言第二種更加方便，而且更加容易組件化...
摘要：主要實現功能在畫布上跟隨鼠標的按鍵移動畫出拖拉范圍內的矩形彈出選擇項，選對勾則將這部分矩形填上背景色，選叉號則取消本次拖拉的矩形。附業務目的視頻遮罩是一種將視頻某部分區域遮蓋的效果，可用于遮蓋電視臺圖標，廣告，鏡頭內敏感部分等。 作者：云荒杯傾 序 本意是用這個做視頻遮罩效果，但是還是從更通用的角度來解釋事情本身吧。少摻雜一點業務目的。 主要實現功能 在canvas畫布上跟隨鼠標的按鍵...
摘要：轉載來源包管理器管理著庫，并提供讀取和打包它們的工具。能構建更好應用的客戶端包管理器。一個整合和的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數據。 轉載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。?npm – npm 是 javasc...
閱讀 1402·2021-10-14 09:43
閱讀 992·2021-09-10 10:51
閱讀 1441·2021-09-01 10:42
閱讀 2189·2019-08-30 15:55
閱讀 586·2019-08-30 15:55
閱讀 2339·2019-08-30 14:21
閱讀 1715·2019-08-30 13:04
閱讀 3467·2019-08-29 13:09
