你的位置:首页 > 网页设计

[网页设计]HTML5_02之视频、音频、Canvas


1、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()方法时触发;
2、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代替;
3、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.fill/渐变对象;——填充样式;
  ctx.stroke/渐变对象;——描边样式;
  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;//测量文本宽度;