API，簡單來講就是接口。

DOM是html給js的接口，BOM是瀏覽器給html的接口。

列舉下HTML5中的API：

1.canvas(具體內容見：https://my.oschina.net/u/3502371/blog/1058178)

2.SVG

指可伸縮矢量圖形，可在任何的分辨率下被高質量地打印，用于定義網絡的基于矢量的圖形。

svg和canvas的區別：

svg繪制的是矢量圖，canvas繪制的是位圖；

svg使用XML來繪制圖片，canvas使用JavaScript來繪制圖片；

svg的兼容性好，canvas需要兼容H5的瀏覽器；

svg可以給每個圖形綁定事件，canvas不可以；

應用領域：圖標、地圖

在HTML中使用SVG：

svg

var rect = document.getElementById('myrect');

rect.onclick = function() {

alert('svg');

}

3.地理定位

navigator.geolocation

獲取地理位置：

navigator.geolocation.getCurrentPosition(successCallback,errorCallback,options);

監控當前位置

navigator.geolocation.watchPosition(successCallback,errorCallback,options);

停止監控當前位置

navigator.geolocation.clearWatch();

Position對象

errorPosition對象

選項

Position對象

//獲取地理定位

navigator.geolocation.getCurrentPosition(function(position) {

//獲取緯度：

var latitude = position.coords.latitude;

//獲取經度

var longitude = position.coords.longitude;

//獲取海拔

var altitude = position.coords.altitude;

//坐標精度

var accuracy = position.coords.accuracy;

//海拔精度

var altitudeAccuracy = position.coords.altitudeAccuracy;

//行進方向heading

//行進速度speed

//時間timestamp

},function(error) {

console.log('地理位置獲取失敗：' + error.code + ':' + error.message);

},{

//是否得到最佳 返回true|false

enableHighAccuracy:true,

//超時時間

timeout:5000,

//是否接受的緩存時間

maximumAge:true

})

注意：chrome、firefox、微信等瀏覽器要成功獲取地理位置，網頁必須使用https協議打開

4.多媒體

多媒體元素標簽：

多媒體

視頻DOM屬性：

src ?音/視頻來源

autoplay ?自動播放

muted ?是否靜音

volume ?獲取或設置音量

……

視頻DOM方法：

play() ?播放

pause() ?暫停

load() ?重新加載

……

視頻DOM事件：

onplay ?播放

onpause ?暫停

……

視頻插件

ckplayer ?flash/h5

jplayer ?flash/h5

flowplayer ?flash/h5

video.js ?h5

flv.js ?flash

5.拖放

屬性：

draggable ?控制元素是否可以被拖動(所有元素都有) ?true/false

事件:

綁定給目標元素的事件

ondragenter

ondragleave

ondragstart

ondragover

ondrop

綁定給拖放元素的事件

ondragstart

ondragend

ondrag

dragEvent：

dataTransfer ?用于不同event之間的數據交換

setData(key,value)

getData(key)

拖放

#drag-box {

width: 100px;

height: 100px;

border: 1px solid #ccc;

background: pink;

cursor: pointer;

}

#box {

margin: 20px auto;

padding: 10px;

width: 1200px;

height: 300px;

border: 2px solid #aaa;

background: #eee;

}

#box.over {

border: 2px dashed #aaa;

transform:scale(0.9,0.9);

}

//獲取目標元素

var box = document.getElementById('box');

function dragstart(ele,en) {

//把id存入dataTransfer

en.dataTransfer.setData('id',ele.id);

}

//當拖拽元素進入目標元素

box.addEventListener('dragenter',function() {

this.classList.add('over');

})

//當拖拽運算離開目標元素

box.addEventListener('dragleave',function() {

this.classList.remove('over');

})

//當拖拽元素在目標元素上

box.addEventListener('dragover',function(en) {

//阻止默認事件

en.preventDefault();

})

//當拖拽元素放在目標元素上

box.addEventListener('drop',function(en) {

//取到id

var id = en.dataTransfer.getData('id');

this.appendChild(document.getElementById(id));

this.classList.remove('over');

})

總結

以上是生活随笔為你收集整理的html5 打印api,HTML5的API（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。