HTML5的Video视频、Audio音频、Canvas的事件属性详解

给大家剧透一下，今天下午4点会在QQ群：454796847进行web前端开发直播。欢迎大家莅临！

HTML5新特性之视频播放——video：

 ①例：<video src=""></video>
 ②video标签默认为300*150的inline-block；
 ③成员属性：
  autoplay：是否自动播放；
  controls：是否显示播放控件；
  currentTime：当前播放到的时间；
  duration：总时长；
  defaultMuted：默认是否静音；
  loop：是否自动循环播放；
  muted：当前是否静音；
  paused：当前是否处于暂停状态；
  poster：""，在视频播放前的显示图片；
  volumn：当前播放音量；
  preload：预加载内容；取值：auto——自动预加载视频内容，并缓冲一段；metadata——仅预加载影片元素据（宽高时长）；none——不预加载任何数据；
 ④成员方法：
  play();——视频开始播放，paused属性变为false；
  paused();——视频暂停，paused属性变为true；
 ⑤成员事件：
  onplay:fn——当调用v.paly()方法时触发；
  onpause:fn——当调用v.pause()方法时触发；

HTML5新特性之音频播放audio

 ①例：<audio src=""></audio>
 ②audio标签默认为300*30的inline-block，若不显示播放控件，则display为none；
 ③成员属性：
  autoplay：是否自动播放；
  controls：是否显示播放控件；
  currentTime：当前播放到的时间；
  duration：总时长；
  defaultMuted：默认是否静音；
  loop：是否自动循环播放；
  muted：当前是否静音；
  paused：当前是否处于暂停状态；
  poster：""，在视频播放前的显示图片；
  volumn：当前播放音量；
  preload：预加载内容；取值：auto——自动预加载音频元素据内容，并缓冲一段；metadata——仅预加载音频元素据；none——不预加载任何音频数据；
 ④成员方法：
  play();——音频开始播放，paused属性变为false；
  paused();——音频暂停，paused属性变为true；
 ⑤成员事件：
  onplay:fn——当调用v.paly()方法时触发；
  onpause:fn——当调用v.pause()方法时触发；
 ⑥IOS系统自带Safari浏览器不支持audio标签，可使用隐藏的video代替；

HTML5新特性之Canvas绘图

 ①Canvas：画布，默认为300*150的inline-block，设定画布的宽高不能使用CSS Style，只能使用width和height属性；
 ②Canvas画布本身不能绘制内容，只用于承载被绘制的内容，画笔使用原生JS 创建：var ctx=canvas.getContext('2d');
 ③Context对象常用属性：
  fillStyle:"#000000"——填充样式；
  strokeStyle:"#000000"——描边/轮廓样式；
  font:"10px sans-serif"——字体大小、类型
  textAlign:"start"——文本对齐方式；
  textBaseline:"alphabetic"——文本基线；
  globalAlpha：——全局不透明度；
  lineWidth：线/描边宽度；
  shadowOffsetX：阴影在x轴的偏移量；
  shadowOffsetY：阴影在y轴的偏移量；
  shadowColor:"rgba(0,0,0,0)"——阴影颜色及透明度；
  shadowBlur：阴影模糊半径；
 ④Context对象常用方法：
  arc()：绘制一个圆弧/圆形；
  beginPath()：开始绘制一条路径；
  closePath()：闭合一条路径；
  fill()：对路径进行填充；
  stroke()：对路径进行描边；
  moveTo()：移动到某一点；
  lineTo()：绘制到另一点的一条线段；
  fillRect()：填充一个矩形；
  strokeRect()：描边一个矩形；
  clearRect()：清空一个矩形范围内的所有内容；
  fillText()：填充一个字符串；
  strokeText()：描边一个字符串；
  drawImage()：绘制图像；
 ⑤创建一个线性渐变对象：
  var g=ctx.createLinearGradient(x1,y1,x2,y2);
  g.addColorStop(offset1,color1);
  g.addColorStop(offset2,color2);
 ⑥绘制矩形（rectangle）：定位点位于左上角
  ctx.fillStyle="#000"/渐变对象;——填充样式；
  ctx.strokeStyle="#000"/渐变对象;——描边样式；
  ctx.lineWidth=;——描边宽度；
  ctx.fillRect(x,y,w,h);——填充一个矩形；
  ctx.strokeRect(x,y,w,h);——描边一个矩形；
  ctx.clearRect(x,y,w,h);——清除一个矩形范围内的内容；
 ⑦绘制文本（text）：文本定位点在整个字符串文本基线最左边
  ctx.textBaseline="alphabetic";//文本基线，可取值为：top/middle/alphabetic/bottom；
  ctx.font="10px sans-serif";
  ctx.fillText(txt,x,y);
  ctx.strokeText(txt,x,y);
  ctx.measureText(txt).width;//测量文本宽度；

： » HTML5的Video视频、Audio音频、Canvas的事件属性详解