什么是 Geolocation API？
HTML5 Geolocation API 用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。
注意：Geolocation（地理定位）对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确。
使用地理定位
Geolocation API 的主要方法是 getCurrentPosition，它用来获得用户的位置。
下面是一个简单的地理定位实例，可返回用户位置的经度和纬度:
var x=document.getElementById("demo");
function getLocation(){
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition);
}
else{
x.innerHTML="该浏览器不支持获取地理位置。";
}
}
function showPosition(position){
x.innerHTML="纬度: " + position.coords.latitude +
"<br>经度: " + position.coords.longitude;
}
实例解析:
- 检测是否支持地理定位。
- 如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息。
- 如果 getCurrentPosition() 运行成功，则向参数 showPosition 中规定的函数返回一个 coordinates 对象。
- showPosition() 函数获得并显示经度和纬度。
getCurrentPosition() 方法返回数据
如果 getCurrentPosition() 运行成功，则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用，则会返回其他下面的属性：
- coords.latitude：十进制数的纬度
- coords.longitude：十进制数的经度
- coords.accuracy：位置精度
- coords.altitude：海拔，海平面以上以米计
- coords.altitudeAccuracy：位置的海拔精度
- coords.heading：方向，从正北开始以度计
- coords.speed：速度，以米/每秒计
- timestamp：响应的日期/时间
HTML5 拖放（Drag 和 Drop）
拖放（Drag 和 drop）是 HTML5 标准的组成部分。
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
</body>
</html>
设置元素为可拖放
首先，为了使元素可拖动，需要把 draggable 属性设置为 true ：
<img draggable="true">
拖动什么 - ondragstart 和 setData()
然后，规定当元素被拖动时，会发生什么。
在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据类型和值：
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
在这个例子中，数据类型是 "Text"，值是可拖动元素的 id ("drag1")。
放到何处 - ondragover
ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法：
event.preventDefault()
进行放置 - ondrop
当放置被拖数据时，会发生 drop 事件。
在上面的例子中，ondrop 属性调用了一个函数，drop(event)：
function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
SVG 介绍
什么是 SVG？
- SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
- SVG 用于定义用于网络的基于矢量的图形
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
- SVG 是万维网联盟的标准
在 HTML5 中，你能够直接将 SVG 元素嵌入 HTML 页面中。
SVG 圆形
要使用 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 一些预定义的其他形状元素：
SVG 矩形 - <rect>
<rect> 标签可用来创建矩形，以及矩形的变种。
<svg width="1000" height="1000">
<rect width="400" height="200"
x="20" y="20" fill="red" />
</svg>
运行显示结果如下图：
SVG 直线 - <line>
<line> 标签是用来创建一个直线。
<svg width="500" height="510">
<line x1="20" y1="20" x2="300" y2="200"
style="stroke:#000000; stroke-linecap:round;
stroke-width:20" />
</svg>
运行显示结果如下图：
SVG 曲线 - <polyline>
<polyline> 标签是用于创建任何只有直线的形状。
<svg width="2000" height="500">
<polyline style="stroke-linejoin:miter; stroke:black;
stroke-width:12; fill: none;"
points="100 100, 150 150, 200 100" />
</svg>
运行显示结果如下图：
SVG 椭圆、多边形
SVG 椭圆 - <ellipse>
<ellipse> 标签是用来创建一个椭圆。
椭圆与圆很相似。不同之处在于椭圆有不同的x和y半径，而圆的x和y半径是相同的。
<svg width="500" height="250">
<ellipse cx="200" cy="100" rx="150" ry="70" style="fill:red" />
</svg>
运行显示结果如下图：
SVG 多边形 - <polygon>
<polygon> 标签用来创建含有不少于三个边的图形。
<svg width="1000" height="1000">
<polygon points="100 100, 200 200, 300 0"
style="fill: red; stroke:black;" />
</svg>
运行显示结果如下图：
