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对于我来说就是全新的知识，原来完全没有看过，以致于今天做的视频弹幕的案例有些懵懵懂懂。