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