HTML5新增API
canvas
- 可視化數(shù)據
- 特效 banner
- 游戲
- 模擬器(在線PS、在線編輯器)
- 地圖
SVG
定義
矢量圖工具， 繪圖
SVG在H5標準之前就有了， IE對SVG的兼容性非常好
svg與canvas區(qū)別
- 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) 監(jiān)聽地理位置變化
- clearWatch() 停止位置監(jiān)聽
position對象
獲取位置成功會調用 successCallback回調函數(shù)， 自動接收position對象
-
coords
- longitude 維度
- latitude 精度
- altitude 海拔
- handing 前進方向
- speed 速度
- altitudeAccuracy 海拔經度
- accuracy 坐標經度
timestamp 時間戳
error對象
獲取位置失敗，調用errorCallback回調，調用 error對象
- code 錯誤代碼
- message 錯誤信息
選項 options
- timeout 超時時間
- enableHighAccuracy 是否最優(yōu)
- 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 元素就可以被拖拽
事件
- ondrag
- ondragstart
- ondragend
- ondragenter
- ondragleave
- ondragover
- ondrop
dataTransfer
- 獲取 是dragEvent的屬性
- getData()
- setData()
拖拽實例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width:500px;
height:300px;
border:1px solid #ccc;
padding:10px;
margin-bottom:20px;
}
#drag_box{
width:100px;
height:100px;
border:1px solid #ccc;
background:orange;
}
</style>
</head>
<body>
<div id="box" ondrop="drop()" ondragover="dragover(event)"></div>
<div id="drag_box" draggable="true" ondragstart="dragstart(event)"></div>
<script>
function dragstart(en){
console.log(en);
}
function drop(){
document.getElementById("box").appendChild(document.getElementById("drag_box"));
}
function dragover(en){
en.preventDefault(); //阻止默認事件
}
</script>
</body>
</html>
