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>

(2)添加圆环标签

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

秒客网

HTML5新特性-- -定时器

相关文章