20201009岳浩天

知识总结

video

poster:用于获取/设置视频的海报帧(vdo.poster="")

muted:用于获取/设置媒体对象在播放时是否静音

controls:用于获取/设置媒体对象在播放时是否显示播放控件

volume:用于获取/设置媒体的音量(取值范围来[0,1])

playbackRate:用于获取/设置媒体的播放速率,如果其值为1.0,为正常速率,如果小于1.0则低于正常速率,否则高于正常速率

paused:用于获取媒体对象是否在暂停,返回值为布尔值

ended:用于获取媒体对象是否播放完毕,返回布尔值

currentTime:用于获取/设置媒体对象的当前播放时间(单位为秒)

duration:用于获取媒体对象的总时长(单位为秒)

方法:play()播放

​ pause()暂停

事件:

play:在媒体对象播放时触发
vde.addEventListener('play',()=>{})
vde.onplay=()=>{}
pause:在媒体对象暂停时触发
vde.addEventListener('pause',()=>{})
vde.onpause=()=>{}
ended:在媒体对象播放完毕后触发
loadeddata:在媒体文件的第一帧加载完成后被触发
timeupdate:在媒体对象的currentTime属性发生变化时调用
canplaythrough:在媒体对象加载结束时触发

canvas

canvas的特点:

  • 依赖屏幕分辨率
  • 不支持事件处理器
  • 弱的文本渲染能力
  • 能够以 .png 或 .jpg 格式保存结果图像
  • 最适合图像密集型的游戏,其中的许多对象会被频繁重绘
  • 颜色非常细腻
  • 不可以放大或缩小

svg的特点:

  • 矢量可以无限放大和缩小,并且不失真
  • 颜色不够丰富
  • 不依赖分辨率
  • 支持事件处理器
  • 最适合带有大型渲染区域的应用程序,比如:谷歌地图
  • 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
  • 不适合游戏应用

除去上述外canvas 和 svg 区别:

  • 绘图类型
    canvas:2D位图
    svg:2D矢量图
  • 如何绘图
    canvas:使用js代码
    svg:标签
  • 事件绑定
    canvas:只能绑定在画布上
    svg:每个图形都可以
  • 应用场景
    canvas:网页特效、游戏
    svg:地图

使用步骤:

  1. 通过标签创建画布(
  2. 通过js程序获取画布
  3. 获取画笔(var ctx=cvs.getContext(contextType);)
  4. 绘制

绘制图形:

绘制空心矩形(描边矩形):ctx.strokeRect(x,y,width,height)

绘制实心矩形(填充矩形):ctx.fillRect(x,y,width,height)

画笔透明度:ctx.globalAlpha

绘制文本:

描边文本:ctx.strokeText(text,x,y)

实心文本:ctx.fillText(text,x,y)

设置文本:ctx.font="字号 字体";

清空元素:

ctx.clearRect(x,y,width,height)

心得

今天学习了html5的部分,这其中canvas对于我来说就是全新的知识,原来完全没有看过,以致于今天做的视频弹幕的案例有些懵懵懂懂。

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1