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 圆角
最新文章
- ThinkPHP3.2.3整合smarty模板(二)
- .NET操作Xml类
- ntp -q 输出说明
- win8.1 cygwin编译java轻量虚拟机avian
- Linux基本命令(6)线上查询的命令
- Codeforces Round #299 (Div. 1)
- ASP.NET MVC:多模板支持
- JAVA必备——13个核心规范
- 鸟哥的linux私房菜学习-(五)补充:重点回顾
- Halcon一日一练:图像拼接技术
- 【Python3爬虫】下载酷狗音乐上的歌曲
- python函数详解
- python3字符串操作
- sizeof strlen区别于联系
- vue之vue-cookies安装和使用说明
- 玩转音频、视频的利器:FFmpeg
- 浏览器测试string是否为图片
- 查看sedna创建的数据库和集合,文档之类
- 自定义 Repository 方法
- LevelDB Compaction操作