HTML5新增API

weixin_33912445發表於2017-06-12
HTMLAPI

HTML5新增API

canvas

  • 視覺化資料
  • 特效 banner
  • 遊戲
  • 模擬器(線上PS、線上編輯器)
  • 地圖

SVG

定義

向量圖工具， 繪圖
SVG在H5標準之前就有了， IE對SVG的相容性非常好

svg與canvas區別

  • canvas點陣圖， svg是向量圖
  • canvas使用JavaScrpt繪圖， svg使用XML來繪圖
  • canvas不支援事件（藉助庫） svg支援事件

svg的應用領域

* 向量圖示
* 地圖

SVG的使用

  • <svg>
  • <rect>
  • <circle>
  • <line>
  • <path>
  • <ellipse>
  • <polygon>
  • .....

HTML中使用SVG

  • 在html中直接寫 <svg>
  • <embed src="" type="image/svg+xml" width="" height="">
  • <object data="" type="image/svg+xml" width="" height="">
  • <iframe src="">

地理定位 geolocation

navigator.gentlocation

  • getCurrentPosition(successCallback, errorCallback, options) 獲取當前的地理位置
  • watchPosition(successCallback, errorCallback, options) 監聽地理位置變化
  • clearWatch() 停止位置監聽

position物件

獲取位置成功會呼叫 successCallback回撥函式， 自動接收position物件

  • coords

    • longitude 維度
    • latitude 精度
    • altitude 海拔
    • handing 前進方向
    • speed 速度
    • altitudeAccuracy 海拔經度
    • accuracy 座標經度

  • timestamp 時間戳

error物件

獲取位置失敗，呼叫errorCallback回撥，呼叫 error物件

  • code 錯誤程式碼
  • message 錯誤資訊

選項 options

  • timeout 超時時間
  • enableHighAccuracy 是否最優
  • maxmunAge 最大快取時間

注意

  • chrome瀏覽器只有在https方式下開啟的網頁才能獲取地理位置
  • 手上上的大部分瀏覽器，微信 也要求https 才能獲取位置

多媒體

相關標籤

  • <video> 視訊
  • <audio> 音訊
  • <source>
  • <track>

DOM(video/audio)

  • 屬性
    • volume 音量
    • muted 是否靜音
    • ....
  • 方法
    • play()
    • pause()
    • .....
  • 事件
    • onplay
    • ....

視訊外掛

  • ckplayer
  • jplayer
  • flowplayer
  • video.js
  • flv.js

拖拽

屬性

  • draggable 設定為true 元素就可以被拖拽

拖拽事件

  • ondragstart 開始被拖動的時候觸發 繫結給被拖動的元素

  • ondrag 拖動的過程總被連續觸發 繫結給被拖動的元素

  • ondragend 停止拖動的時候的觸發 繫結給被拖動的元素

  • ondragenter 當被拖拽的元素進入到目標元素 繫結給目標元素 用於進入目標去區域時 目標區域樣式改變

  • ondrageover 當被拖拽的元素在目標元素內移動 繫結給目標元素 需要組織預設的動作 event.preventDefault()

  • ondrageleave 當被拖拽的元素離開目標元素 繫結給目標元素

  • ondrop 在目標元素內停止拖拽 繫結給目標元素

dataTransfer

  • 獲取 是dragEvent的屬性
  • getData()
  • setData()

檔案API

上傳input

  • 多檔案上傳 設定屬性 multiple
  • 限制上傳檔案的格式 屬性 accept="image/jpeg" accept="text/html" image/*

FileList物件

  • 是使用者上傳或者拖拽到瀏覽器的 檔案的集合
  • 可以通過 inputElement.files 來獲取
  • 是一個類陣列物件 由File物件組成

File物件

  • 屬性 name
  • 屬性 size
  • 屬性 type
  • 屬性 lastModified
  • 屬性 lastModifiedDate

FileReader

屬性
  • result 讀取結果
  • error 錯誤內容
  • readyState 讀取狀態
方法
  • readAsText() 把檔案讀取為文字
  • readyAsDataURL() 讀取為base64圖片編碼
  • readyAsArrayBuffer()
  • readyAsBinaryString()
  • abort() 終止讀取操作
事件
  • onerror 讀取錯誤時觸發
  • onabort 讀取中斷時觸發
  • onloadstart 讀取開始時觸發
  • onload 讀取成功時觸發
  • onloadend 讀取結束時 不論成功或失敗
  • onprogress 讀取過程中多次觸發

XHR2

關於

  • XMLHttpRequest 簡稱 XHR
  • XMLHttpRequest level2 簡稱XHR2
  • XHR2在 XHR的基礎上新增了 好多 屬性 事件
  • 新增FormData物件 XMLHttpRequestUpload物件

FormData

屬性

  • readyState 請求響應狀態
  • status HTTP狀態 404/200/503/403/304
  • responseText 響應內容
  • timeout 超時時間 xhr2

方法

  • abort()
  • open()
  • send()
  • XHR2沒有新增方法

事件

  • readystatechagne
  • load 請求成功完成時觸發 XHR2
  • progress 進度事件 下載重複觸發大約50ms觸發一次 XHR2
  • error 請求失敗時觸發 XHR2
  • loadstart 請求開始時觸發 XHR2
  • loadend 請求結束時觸發 無論成功都會觸發 XHR2
  • abort 請求中斷時觸發 XHR2
  • timeout 請求超時時觸發 XHR2

附錄

XML HTML XHTML

  • HTML 超文字標記語言 最新版本5
  • XHTML 可擴充套件超文字標記語言
  • XML 可擴充套件標記語言 用來傳輸和儲存資料
  • JSON 資料格式 用來傳輸和儲存資料

相關文章