前端面试题HTML5(二)

1、Html5 视频常用的方法和事件有哪些

-controls -是否显示播放控件
-autoplay -是否自动播放
-loop -是否循环播放
-muted -是否是静音播放
-poster -在播放视频之前广告
-preload -预加载策略
auto:预加载一定时长视频与元数据
metadata:预加载元数据
none:不预加载数据
-volume:1 当前音量 (0~1)
-playbackRate 回放速率 大于1快放 小于1慢播
-paused:true 当前视频是否处理暂停状态
-play() 播放视频
-pause() 暂停播放视频
-onplay 当前视频开始播放时触发事件
-onpause 当前视频暂停播放时触发事件

2、如何解决html5视频移动播放时同层播放问题

<video src="http://xxx.mp4" x5-video-player-type="h5"/>

3、Canvas 绘图技术常用路径方法与属性有哪些

ctx.beginPath(): 		
  ctx.closePath(); 		
  ctx.moveTo(x,y); 	
  ctx.lineTo(x,y);   	
  ctx.stroke();     
  ctx.fill();       	
  ctx.arc(cx,cy,r,start,end);

4、Canvas 绘图技术常用图像方法与属性有哪些

var p3 = new Image();
   p3.src = "x.png"
  p3.onload = function(){..}
  ctx.drawImage(p3,x,y);
  

5、Canvas 绘图技术常用变形方法与属性有哪些

rotate(deg)
     -translate(x,y) 
     -save() 
     -restore();

6、Svg 绘图技术例举三个常用标签

 <ellipse rx="" ry="" cx="" cy=""></ellipse>
 <line x1="" y1="" x2="" y2="" stroke-width="" stroke-linecap="" stroke=""></line>
<rect x="" y="" width="" height="" fill="" fill-opacity=""
 <circle cx="" cy="" r=""></circle>

7、Canvas 绘图技术如何绘制贝赛尔曲线

moveTo(x,y); 起点坐标
quadraticCurveTo(cp1x,cp1y,x,y); 控制点和终点坐

8、Canvas 绘图技术如何使用平滑动画处理

 window.requestAnimationFrame()

9、Html5拖放api提供哪些事件

-拖动源对象
dragstart 拖动开始
drag 拖动中
dragend 拖动结束

-拖动目标对象(不会动)
dragenter 拖动进入
dragover 拖动悬停
dragleave 拖动离开
drop 释放

10、Html5 地于定位对象与方法有哪些

navigator.geolocation.getCurrentPosition
navigator.geolocation.watchPosition()
navigator.geolocation.clearWatch();

11说说HTML5，CSS3的新特性，使用过哪些？

答案：
H5新特性：
结构标记（header，footer，section，article，aside，nav），新表单元素（url，email，number，date，month，color等），canvas，audio，video，地理定位，拖放，web存储，Web Workers，WebSocket等。
CSS3新特性：
复杂选择器器（属性选择器，伪类选择器，伪元素选择器，兄弟选择器等），边框倒角，边框阴影，渐变，转换，过渡，动画，弹性盒子，媒体查询技术等。