html5 打印api,HTML5的API（一）

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');

})