一 html5 地理定位
html5 Geolocation API用于得到用户的地理位置
鉴于该特性可能陵犯用户的隐私,除非用户赞许,否则用户位置信息是不可用的
把稳:Geolocation(地理定位)对付拥有GPS的设备,地理定位更加精确
Geolocation API的紧张方法是gerCurrentPositon,它用来得到用户的位置
下面是一个简答的地理定位实例,可返回用户位置的经度和纬度:
var x=document.getElementById(\公众demo\"大众);
function getLocation(){
if(navigator.geolocation){
navigator.geolocation.getCurrentLocation(showPositon);}
else{
x.innerHTML=\"大众该浏览器不支持获取地理位置.\"大众}
}
function showPosition(position){
x.innerHTML=\"大众纬度:\"大众+position.coords.latitude+
\"大众<br>经度:\"大众+position.coords.longitude;}
实例解析:
●检测是否支持地理定位
●如果支持,则运行gerCurrentPosition()方法.如果不支持,则向用户显示一段信息
●如果getCurrentPostion()运行成功,则向参数showPosition中规定的函数返回一个coordinates工具
●showPosition()函数得到并显示经度和纬度
上面的例子是一个非常根本的地理定位脚本,不含缺点处理
你须要先熟习JavaScript才能理解和利用API
如果gerCurrentPosition()运行成功,则getCurrentPosition()方法返回工具.始终返回latitude,longtitude以及accuracy属性.如果可用,则会返回其他下面的属性:
●coords.latitude:十进制数的纬度
●coords.longtitude:十进制的经度
●coords.accuracy:位置精度
●coords.altitude:海拔,海平面以上以米计
●coords.altitudeAccuracy:位置的海拔精度
●coords.heading:方向,从正北开始以度计
●coords.speed:速率,以米/每秒计
●timestamp:相应的日期/韶光
二 html5 拖放
拖放(Drag和drop)是html5标准的组成部分
拖放是一种常见的特性,即抓取工具往后拖到另一个位置
在html5中,拖放是标准的一部分,任何元素都能够拖放
★设置元素为可拖放
首先,为了使元素可拖动,须要把draggable属性设置为true:
<img draggable=\"大众true\公众>
★拖动什么-ondragstart和setData()
然后,规定当元素拖动时,会发生什么
dataTransfer.setData()方法,设置被拖数据的数据类型和值:
function drag(ev){
ev.dataTransfer.setData(\公众Text\"大众,ev.target.id);}
在这个例子中,数据类型是\公众Text\"大众,值是可拖动元素的id(\"大众drag1\公众)
★放到何处-ondragover
ondragover韶光规定在何处放置被拖动的数据
默认地,无法将数据/元素放置到其他元素中,如果须要设置许可放置,我们必须阻挡元素的默认处理办法.
这要通过调用ondragover韶光的event.preventDefault()方法:
event.preventDefault()
★进行放置-ondrop
当放置被拖数据时,会发生drop事宜
function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData(\"大众Text\"大众);
ev.target.appendChild(document.getElementById(data));}
三 html5 SVG
什么是SVG?
●SVG指可伸缩矢量图形(Scalable Vector Graphics)
●SVG用于定义用于网络的基于矢量的图形
●SVG利用XML格式定义图形
●SVG图像在放大或改变尺寸的情形下其图形质量不会丢失
●SVG是万维同盟的标准
在html5中,你能够直接将SVG元素嵌入html页面中
要利用SVG绘制图形,你首先须要创建一个<svg>标签
<svg width=\公众1000\公众 height=\公众1000\"大众></svg>
要创建一个圆形,须要添加一个<circle>标签
下面是SVG代码:
<svg width=\"大众1000\公众 height=\公众1000\公众>
<circle cx=\"大众100\公众 cy=\"大众50\"大众 r=\"大众40\"大众 fill=\"大众red\"大众 />
</svg>
●cx和cy属性定义圆点的x和y坐标.如果省略cx和cy,圆的中央会被设置为(0,0)
●r属性定义圆的半径
运行效果如下:
我们来看看SVG一些预定义的其他形状元素:
SVG矩形-<rect>
<rect>标签用来创建矩形,以及矩形的变种
<svg width=\"大众1000\"大众 height=\公众1000\"大众>
<rect width=\"大众400\"大众 height=\"大众200\"大众 x=\"大众20\"大众 y=\"大众20\公众 fill=\"大众green\"大众 />
</svg>
运行效果如下:
SVG 直线-<line>
<line>标签是用来创建一个直线
<svg width=\"大众500\公众 height=\"大众510\公众>
<line x1=\"大众20\公众 y1=\"大众20\"大众 x2=\"大众300\"大众 y2=\公众300\"大众
style=\公众stroke:#0000000;stroke-linecap:round; stroke-width:20\公众 />
</svg>
运行效果如下:
SVG 曲线-<polyline>
<polyline>标签用于创建任何只有直线的形状
<svg width=\"大众2000\公众 height=\"大众500\公众 >
<polyline style=\公众stroke-linejoin:miter; stroke:orange; stroke-width:12; fill=none;\"大众
points=\公众100 100,150 150, 200 100\"大众 />
</svg>
运行效果如下:
SVG 椭圆-<ellipse>
<ellipse>标签是用来创建一个椭圆
椭圆和圆很相似,不同之处在于椭圆有不同的x和y半径,而圆的x和y半径是相同的
<svg width=\公众500\公众 heigh=\公众250\"大众>
<ellipse cx=\"大众200\"大众 cy=\"大众100\"大众 rx=\"大众150\"大众 ry=\"大众30\"大众 style=\"大众fill:blue\"大众 />
</svg>
运行效果如下:
SVG 多边形-<polygon>
<polygon>标签用来创建含有不少于三个边的图形
<svg width=\"大众1000\"大众 height=\"大众1000\"大众>
<polygon points=\"大众100 100,200 200, 300 0\公众
style=\"大众fill:Cyan; stroke:black;\"大众 />
</svg>
运行效果如下:
