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 圆角