H5新特性---SVG--椭圆--直线--文本--滤镜(高斯滤镜--模糊)--地理定位
今天的目标
3.1:h5新特性--SVG--椭圆
<ellipse rx="" ry="" cx="" cy=""></ellipse>
rx:水平半径
ry:垂直半径
3.2:h5新特性--SVG--直线
<line x1 y1 x2 y2 stroke></line>
练习:使用SVG 中的直线绘制如下图标(汉堡包)
3.3:h5新特性--SVG--折线 (一条折线上可以有任意多个点)
<polyline points="50,50 10,50 .." fill="transparent"
stroke="#000"></polyline>
3.4:h5新特性--SVG--文本
<text font-size="" fill="" stroke="" x= y=>文本内容</text>
练习:使用折线绘制五角星
3.5:h5新特性--SVG--渐变对象
<defs> 定义特效对象:渐变对象属于一种特效对象
<linearGradient id="g3" x1="" y1="" x2="" y2="">
<stop offset="" stop-color="red" stop-opacity=""/>
<stop offset="" stop-color="red" stop-opacity=""/>
</ linearGradient >
<defs>
<ANY fill="url(#g3)" stroke="url(#g3)"></ANY>
练习:创建三个柱子,使用渐变对象,为不同的柱子分配不同
渐变对象
3.6:h5新特性--SVG--滤镜(高斯滤镜--模糊)
<defs>
<filter id="f2">
<feGaussianBlur stdDeviation="3" />
</filter>
</defs>
<ANY filter="url(#f2)" >
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter
3.7:h5新特性--地理定位
Geolocation:地理定位,使用js获取当前浏览器所在地理坐标(经度,纬度,海拨,速度)数据,用于实现(Location Based Service)
如饿了么,高德导航...
手机浏览器如何获取定位信息
(1)首选手机中的GPS芯片通信,定位精度在米
(2)次选手机通信基站进行定位获取
PC浏览器如何获取定位信息
(1)通过ip地址解析
h5中提供了一个新对象,用于获取当前浏览器定位信息
window.navigator.geolocation{
getCurrentPosition:fn, 获取当前定位信息
watchPostion:fn,
cleaearWatch:fn
}
国内第三方服务商(百度地图/腾讯地图)
#在网页中嵌入百度地图
(1)注册百度开发者帐户(手机号)
http://lbsyun.baidu.com/
(2)创建一个网站,登录百度地图,为网站申请
AccessKey
(3)在自己网页中嵌入百度提供API
3.8:h5新特性--拖放API
Drag & Drop 拖动和释放
HTML5中为拖放操作提供7个事件,分两组
拖动源对象:(会动)
dragstart 拖动开始
drag 拖动中
dragend 拖动结束
拖动目标对象:(不动)
dragenter 拖动进入
dragover 拖动悬停
dragleave 拖动离开
drop 在上方释放
注意:必须阻止dragover的默认行为,drop才可触发
练习:使用拖动源对象提供事件,实现"可以随鼠标拖动而移动小飞机"
提示:父元素相对定位,子元素绝对定位,飞机移动,就是修改top/left属性,拖动事件可以取到相对整个页面左上偏移量e.pageX/pageY
练习:使用拖动事件,源对象和目标对象可能触发7个事件,实现“拖动删除效果”
提示:在刚开始拖动时 src.ondragstart记录拖动源对象
的id,释放时target.ondrtop根据此id找到源对象,
执行删除 div.removeChild(c);
H5新特性---SVG--椭圆--直线--文本--滤镜(高斯滤镜--模糊)--地理定位的更多相关文章
- H5新特性——--第三方绘图工具库 echarts(canvas)---SVG绘图
今天学习的内容 3.1:h5新特性---第三方绘图工具库 echarts(canvas) 百度 echarts;d3;two.js;.... 3.2:h5新特性---SVG绘图 3.2:h5新特性-- ...
- H5新特性-视频,音频-Flash-canvas绘图
json格式 json - > AJAX json:数据格式,通常是以字符串形式表示 对象 {"name":"james","age" ...
- Atitti html5 h5 新特性attilax总结
Atitti html5 h5 新特性attilax总结 Attilax觉得不错的新特性 3.语义Header和Footer (The Semantic Header and Footer) 8.占位 ...
- H5新特性汇总
H5新特性: 新增选择器 document.querySelector.document.querySelectorAll 拖拽释放(Drag and drop) API 媒体播放的 video 和 ...
- H5新特性--WebStorage--WebSocke
今天的目标 3.2:h5新特性--WebStorage localStorage 在客户端浏览器保存数据 永久保存 保存数据 localStorage [key] = value 保存数据 loca ...
- H5新特性---Web Worker---Web Stroage
今天的目标 3.1:h5新特性八--Web Worker---代码就3行 程序:program 存储在外存(磁盘)中代码 进程:Process/Task 将程序调用内存中,分配空间 线程:Thread ...
- H5新特性实现对class的增删改
直接撸代码 全靠死记硬背 没什么技术点 HTML部分 <!DOCTYPE html> <html lang="en"> <head> <m ...
- 使用h5新特性,轻松监听任何App自带返回键
1.前言 如今h5新特性.新标签.新规范等有很多,而且正在不断完善中,各大浏览器商对它们的支持,也是相当给力.作为前端程序员,我觉得我们还是有必要积极关注并勇敢地加以实践.接下来我将和各位分享一个特别 ...
- 前端面试基础-html篇之H5新特性
h5的新特性(目前个人所了解)如下 语义化标签 表单新特性 视频(video)和音频(audio) canvas画布 svg绘图 地理定位 为鼠标提供的拖放API webworker (重点)Stor ...
随机推荐
- TinkPHP框架学习-02控制器基本操作
1-----创建控制器 2-----访问视图页面 3-----注册变量到视图页面 4-----获取表单数据 一 在Home模块下创建控制器 举例: 目录tp/Application/H ...
- K8s存储卷、pv和pvc的使用
emptyDIR 临时目录 hostPath :使用主机的路径 网络存储: 传统的设备存储:NAS,SAN 分布式存储:glusterfs,rbd,cephfs 云存储:EBS,Azure,阿里云的 ...
- phxpaxos遇到反复拉取checkpoint但是反复失败的问题,给其它节点造成压力
原因: 接收checkpoint时与接收普通message共用IOLoop中的队列,当遇到队列满或者超内存时,会造成checkpoint的包随机丢失的问题 解决办法: 遇到checkpoint时不丢弃 ...
- C#使用File.Create()创建文件后资源被占用
由于文件被占用不能读写,所以报错“另一个程序正在使用此文件进程无法访问” 解决方法是在创建文件后立即Dispose掉 File.Create(path).Dispose();
- canel的网络策略
资源: https://docs.projectcalico.org/v3.2/getting-started/kubernetes/installation/flannel 基于pod Egress ...
- mysql学习笔记--遇到的坑
一.navcat 连接不支持密码输入 1. 先通过命令行进去mysql的root账户 mysql -uroot -p'password' 2. 更改加密方式 alter user 'root'@'lo ...
- np.where()命令介绍
- layabox 1 基础
屏幕适配: class GameMain{ public static gameStart:GameStart; public static gameView:GameView; public sta ...
- zabbix添加nginx监控
nginx内置了一个status状态的功能,通过配置可以看到nginx的运行情况,status显示的内容包括当前连接数,处于活动状态的连接数,已经处理的请求数等等,可以利用这个功能编写zabbix监控 ...
- vue 树形下拉框 亲测 好用
https://vue-treeselect.js.org/ 顺带说一个开发中使用这个组件遇到的问题,关于回显之后无法修改的问题 找了很长时间 原因是数据类型导致的问题,数组里面应该是数字类型,直接 ...