什麼是 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>
運行顯示結果如下圖：
