html自学教程(八)html5基础(定位 图形)

一 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>

运行效果如下: