cvmachine.com - 申博开户网

查找: 您的方位主页 > 网络频道 > 阅览资讯:怎样样根据Canvas制造视频遮罩插件?

怎样样根据Canvas制造视频遮罩插件?

2018-02-25 17:20:37 来历:www.cvmachine.com 【

怎样样根据Canvas制造视频遮罩插件?

为一个视频增加一个掩盖物,然后挡住视频某区域,在视频的某一时刻段,比方第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. 画遮罩(矩形)
  2. 设置遮罩款式(供给API)
  3. 遮罩移动
  4. 遮罩缩放
  5. 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的国际或许仅仅是一个开端。

以上便是本文的全部内容,期望对咱们的学习有所协助,也期望咱们多多支撑申博开户。


本文地址:http://www.cvmachine.com/a/question/97203.html
Tags: canvas 详解 根据
修改:申博开户网
  • 上一篇:引进css的四种办法介绍
  • 下一篇:没有了
  • 关于咱们 | 联络咱们 | 友情链接 | 网站地图 | Sitemap | App | 回来顶部