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