HTML5新特性-- -定时器

一、定时器:一次性定时器/周期性定时器

   #requestAnimationFrame 智能定时器

   #此定时器主要使用范围:动画和游戏中

   特点:

   setTimeout(fn,500);

   setInterval(fn,500); 周期性调用fn函数间隔500ms

   二台电脑:  新 12ms   旧 600ms

   解决方案:requestAnimationFrame 智能计算当前浏览器效率

   11ms,计算600ms 按照不同浏览器设置间隔时间

   #实现功能平滑

   #使用方法  requestAnimationFrame == setTimeout

   标准语法

   requestAnimationFrame(fn)

   如何周期调用定时器完成游戏

   function f1(){

     requestAnimationFrame(f1);

     ....

     ....

   }

   f1();

 

 

 二、HTML5新特性-svg--echarts(重点)

   

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

   svg 图形创建流程

   (1)创建画布标签

   <svg id="s3" width="500" height="400">

      ...

   </svg>

   (2)添加圆环标签

   <circle cx="" cy="" r="" fill="" stroke=""></circle>

   cx,cy  圆心坐标

   r     半径

   fill    填充

   stroke 描边

   

通过js在svg画布上动态创建元素 (1)字符串拼接方式来创建元素   var str = "<circle></circle>";   svg.innerHTML = str; (2)通过创建对象方式   var c = document.createElementNS(    "http://www.w3.org/2000/svg",    #指定元素svg标准    "circle");   svg.appendChild(c); (3)为元素添加属性获取属性   设置与获取属性只能采用核心DOM方法不能使用HTML DOM   #核心DOM circle.setAttribute("属性名",值)       var 值=circle.getAttribute("属性名");   #HTML dom   circle.name = value                            var name = circle.name

   

 三、讲解创建画布标签--直线

   <line x1="" y1="" x2="" y2="" stroke-width="" stroke=""

   stroke-linecap=""></line>

   x1="" y1=""  起点坐标

   x2="" y2=""  终点坐标

   stroke-width="" 边线宽度 

   stroke=""      边线样式 

   stroke-linecap="" 边线顶端样式 round 圆角