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()函數獲得并顯示經度和緯度

上面的例子是一個非?；A的地理定位腳本,不含錯誤處理

你需要先熟悉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:

★拖動什么-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 雖然也是標簽，但它不是 HTML5，標題加了 HTML5 只是為了與 canvas 放到一起。

一、為什么要學 SVG ?

SVG 意為可縮放矢量圖形（Scalable Vector Graphics），使用 XML 格式定義矢量圖形。其他的圖像格式都是基于像素的，但是 SVG 沒有單位的概念，它的20只是表示1的20倍，所以 SVG 繪制的圖形放大或縮小都不會失真。

與其他圖像比較，SVG 的優勢有以下幾點：

SVG 可以被多個工具讀取和修改。
SVG 與其他格式圖片相比，尺寸更小，可壓縮性強。
SVG 可任意伸縮。
SVG 圖像可以隨意地高質量打印。
SVG 圖像可以添加文本和事件，還可搜索，適合做地圖。
SVG 是純粹的 XML，不是 HTML5。
SVG是W3C標準

二、SVG 形狀元素

2.1、svg 標簽

SVG 的代碼都放到 svg 標簽呢，SVG 中的標簽都是閉合標簽，與html中標簽用法一致。svg的屬性有：

有width和height，指定了svg的大小。

eg：畫一條直線，完整代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body style="height:600px;">
 <svg width="300" height="300">
  <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="20"></line>    
 </svg> 
</body>
</html>

上述 svg 設置的寬高沒有帶單位，此時默認是像素值，如果需要添加單位時，除了絕對單位，也可以設置相對單位。

viewBox 屬性

使用語法：<svg viewBox=" x1,y1,width,height "></svg>

四個參數分別是左上角的橫縱坐標、視口的寬高。表示只看SVG的某一部分，由上述四個參數決定。

使用 viewBox 之后，相當于svg整體大小不變，只能看到 viewBox 設置部分，視覺上被放大。

2.2、SVG 如何嵌入 HTML

SVG 的代碼可以直接嵌入到 html 頁面中，也可以通過 html 的embed、object、iframe嵌入到html中。嵌入的時候嵌入的是 SVG 文件，SVG 文件必須使用 .svg 后綴。分別介紹各種方法如何使用？

2.2.1、embed 嵌入：

使用語法：<embed src="line.svg" type="image/svg+xml"></embed>

src是SVG文件路徑，type 表示 embed 引入文件類型。

優點：所有瀏覽器都支持，并允許使用腳本。

缺點：不推薦 html4 和 html 中使用，但 html5 支持。

2.2.2、object 嵌入：

使用語法：<object data="line.svg" type="image/svg+xml"></object>

data 是 SVG 文件路徑，type 表示 object 引入文件類型。

優點：所有瀏覽器都支持，支持 html、html4 和 html5。

缺點：不允許使用腳本。

2.2.3、iframe 嵌入：

使用語法：<iframe width="300" height="300" src="./line.svg" frameborder="0"></iframe>

src是 SVG 文件路徑，width、height、frameborder 設置的大小和邊框。

優點：所有瀏覽器都支持，并允許使用腳本。

缺點：不推薦 html4 和 html 中使用，但 html5 支持。

2.2.4、html中嵌入：

svg 標簽直接插入 html 內容內，與其他標簽用法一致。

2.2.5、連接到svg文件：

使用 a 標簽，直接鏈接到 SVG 文件。

使用語法：<a href="line.svg">查看SVG</a>

三、SVG形狀元素

3.1、線 - line

使用語法：
<svg width="300" height="300" >  
 <line x1="0" y1="0" x2="300" y2="300" stroke="black" stroke-width="20"></line>
</svg>

使用line標簽創建線條，(x1,y1)是起點，(x2,y2)是終點，stroke繪制黑線，stroke-width是線寬。

3.2、矩形 - rect

//使用語法：
<svg width="300" height="300" >
<rect 
 width="100" height="100"  //大小設置
 x="50" y="50"  //可選 左上角位置，svg的左上角默認(0,0)
 rx="20" ry="50" //可選 設置圓角
 stroke-width="3" stroke="red" fill="pink" //繪制樣式控制
></rect>
</svg>

上述參數 width、height是必填參數，x、y是可選參數，如不設置的時候，默認為(0,0)，也就是svg的左上角開始繪制。rx、ry是可選參數，不設置是矩形沒有圓角。fill定義填充顏色。

3.3、圓形 - circle

// 使用語法
<svg width="300" height="300" >
 <circle 
  cx="100" cy="50" // 定義圓心 ，可選
  r="40" // 圓的半徑
  stroke="black" stroke-width="2" fill="red"/> //繪制黑框填充紅色
</svg>

上述(cx,xy)定義圓心的位置，是可選參數，如果不設置默認圓心是（0,0）。r是必需參數，設置圓的半徑。

3.4、橢圓 - ellipse

橢圓與圓相似，不同之處在于橢圓有不同的x和y半徑，而圓兩個半徑是相同的。

// 使用語法
<svg width="300" height="300" >
 <ellipse 
  rx="20" ry="100" //設置橢圓的x、y方向的半徑
  fill="purple" // 橢圓填充色
  cx="150" cy="150" //設置橢圓的圓心 ，可選參數
 ></ellipse>
</svg>

上述橢圓的兩個rx、ry兩個方向半徑是必須參數，如果rx=ry就表示是圓形，（cx,cy）是橢圓的圓心，是可選參數，如果不設置，則默認圓心為（0,0）。

3.5、折線 - polyline

// 使用語法
<svg width="300" height="300" style="border:solid 1px red;">
  <!-- 繪制出一個默認填充黑色的三角形 -->
 <polyline 
  points=" //點的集合
   0 ,0, // 第一個點坐標
   100,100, // 第二個點坐標
   100,200 // 第三個點坐標
    " 
  stroke="green" 
 ></polyline>
<!-- 繪制一個臺階式的一條折線 -->
 <polyline 
  points="0,0,50,0,50,50,100,50,100,100,150,100,150,150" 
  stroke="#4b27ff" fill="none"
 ></polyline>
</svg>

上述代碼執行結果如圖所示：

需要注意的是 points 中包含了多個點的坐標，但不是一個數組。

3.6、多邊形 - polygon

polygon 標簽用來創建不少于3個邊的圖形，多邊形是閉合的，即所有線條連接起來。

// 使用語法
<svg width="300" height="300" style="border:solid 1px red;">
 <polygon 
  points="
    0,0,   //多邊形的第一點
   100,100,  //多邊形的第二點
    0,100  //多邊形的第三點
  " 
	stroke="purple"
	stroke-width="1"
	fill="none"
 ></polygon>
</svg>

polygon繪制的時候與折線有些類似，但是polygon會自動閉合，折線不會。

3.7、路徑 - path

path 是SVG基本形狀中最強大的一個，不僅能創建其他基本形狀，還能創建更多其他形狀，如貝塞爾曲線、2次曲線等。

點個關注，下篇更精彩！

試用DIV制作德國國旗

德意志聯邦共和國，簡稱德國，國旗由3種顏色長方形所構成。

我們需要制作出3個長方形來組合成德國國旗，需要用到<div>標簽。

什么是div？

<div> 可以定義文檔中的分區或節；<div> 標簽可以把文檔分割為獨立的、不同的部分。

我們暫且把 div 看作是一個盒子。

現在我們要做的就是讓瀏覽器顯示盒子，并把盒子變成長方形，然后染上黑，紅，金這3種顏色。

試一試在<body></body>加上<div></div>

你會發現無論怎么刷新瀏覽器，還是一片空白。

這是因為<div>這個盒子沒有正常完全的顯示，所以需要兩樣東西：

第一：缺少寬度和高度；我們要在紙上畫出長方形，就必須有長和寬，<div>也是同理。

第二：缺少邊框或背景顏色；要想讓<div>這個盒子能被我們看見，通常是給它加個邊框或者背景顏色。

二者缺一不可，為了這兩樣東西，我們需要把 style 添加到<div>中：

<div style="width:500px;height:100px;background:rgb(0,0,0);"></div>

然后刷新瀏覽器，會出現一個黑色長方形：

我們來看一下加入<div>的html代碼：

<div style="width:500px;height:100px;background:rgb(0,0,0);"></div>

style：它定義了<div>的樣式，也就是說，要讓div變成什么樣子，就需要style來改變div。style等于號后面的width、height、background都屬于style的屬性。

width：定義div的寬度。

height：定義div的高度。

background：定義div的背景顏色?！?黑色：rgb(0,0,0) 紅色：rgb(255,0,0) 金色：rgb(255,200,0) 】

只是一行簡單的代碼，我們就已經完成了國旗1/3的制作，那么依葫蘆畫瓢，你自己寫出剩下兩行代碼吧~

答案：

總結：<div></div>這個盒子需要寬width、高height、背景顏色background才能正常顯示出來。

在線咨詢

上一篇：這種反爬蟲手段有點意思，看我破了它
下一篇：為什么使用 HTML 5？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

html自學教程（八）html5基礎（定位 圖形）

一、為什么要學 SVG ?

二、SVG 形狀元素

三、SVG形狀元素

您的項目需求

html自學教程（八）html5基礎（定位圖形）

一、為什么要學 SVG ?