HTML5的API（一）-CSDN博客

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：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>svg</title>
</head>
<body>
	<svg width="600" height="600">
		<rect x="100" y="100" width="300" height="150" fill="red" stroke="green" stroke-width="10" id="myrect" />
		<circle cx="400" cy="400" r="100" stroke="gray" fill="pink" stroke-width="10" />
	</svg>

	<embed src="" type="image/xml+svg">

	<object data="" type="image/xml/svg"></object>

	<iframe src=""></iframe>
	<script>
		var rect = document.getElementById('myrect');
		rect.onclick = function() {
			alert('svg');
		}
	</script>
</body>
</html>

3.地理定位

navigator.geolocation

获取地理位置：
navigator.geolocation.getCurrentPosition(successCallback,errorCallback,options);

监控当前位置
navigator.geolocation.watchPosition(successCallback,errorCallback,options);

停止监控当前位置
navigator.geolocation.clearWatch();

Position对象
errorPosition对象
选项

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Position对象</title>
</head>
<body>
	<script>
		//获取地理定位
		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
		})
	</script>
</body>
</html>

注意：chrome、firefox、微信等浏览器要成功获取地理位置，网页必须使用https协议打开

4.多媒体

多媒体元素标签：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>多媒体</title>
</head>
<body>
	<!-- 定义视频 -->
	<video src=""></video>

	<!-- 定义声音 -->
    <audio src=""></audio>

	<!-- 定义媒介资源 -->
    <source>
	
	<!-- 媒介规定外部文本轨道，用于规定字幕文件或其他包含文本的文件 -->
    <track></track>
</body>
</html>

视频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)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>拖放</title>
	<style>
		#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);
		}
	</style>
</head>
<body>
	<div id="box"></div>
	<div id="drag-box" draggable="true" ondragstart="dragstart(this,event)"></div>
	<br>
	<img src="http://img5.imgtn.bdimg.com/it/u=3359683100,3152011429&fm=11&gp=0.jpg" alt="" width="200" ondragstart="dragstart(this,event)" id="myimg">

	<script>
		//获取目标元素
		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');
		})
	</script>
</body>
</html>

转载于:https://my.oschina.net/u/3502371/blog/1162789