内联svg
定义
- svg 指可伸缩矢量图
- svg 用于定义用于网络的基于矢量的图形
- svg 使用XML格式定义图形
- 图像在放大或改变尺寸的情况下其图形质量不会有损失
- 是万维网联盟的标准
svg与canvas的区别
- svg是一种使用XML描述的2D图形的语言。canvas通过JavaScript来绘制2D图形。
- svg是基于XML，这意味着svg,dom中的每个元素都是可用的，您可以为某个元素附加 JavaScript 事件处理器。canvas不加事件处理器。
- 在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。（svg不依赖分辨率，canvas依赖分辨率）
- Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。
如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。 - canvas适合图像密集的游戏开发，svg不适合游戏开发
- canvas弱的文本渲染能力，svg适合带有大型渲染区域的应用程序
地理定位
-
navigator.geolocation
- getCurrentPosition(callback,errorcallback,options) //获取当前位置
- watchPosition(callback,error,options) //开始监控当前位置
- clearWatch() //停止监控当前位置
-
Position对象 ，成功回调返回的对象
- coords对象 ：
- latitude 纬度
- longitude 经度
- altitude 海拔
- accuracy 坐标精度
- heading 行进方向
- speed 行进速度 米/秒
- timestamp 时间
- coords对象 ：
-
errorPosition对象 ,错误回调函数的参数
- code 错误代码
- 用户未授权
- 不能确定位置
- 超时
- message 错误信息
- code 错误代码
-
选项
- enableHighAccuracy 是否希望得到最佳 布尔值
- timeout 超时时间
- maximumAge 是否接受的缓存时间
应用 ，百度地图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>地图</title>
<style>
#mymap{
width:600px;
height:600px;
border:1px solid #ccc;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=B8cfd1501ae7f7c55dc3793ee989c354"></script>
</head>
<body>
<h1>地图演示</h1>
<hr>
<div id="mymap"></div>
<script>
//获取地理定位
navigator.geolocation.getCurrentPosition(
function(position){
createMap(position.coords.longitude, position.coords.latitude, 15);
},
function(){
alert("获取地理位置失败");
createMap(116.404, 39.915, 11)
},
{
timeout:3000
}
);
/**
* 生成地图
* @param number longitude 维度
* @param number latitude 经度
* @param number zoom
*/
function createMap(longitude, latitude, zoom){
var zoom = zoom || 11; //设置默认值
// 百度地图API功能
var map = new BMap.Map("mymap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(longitude, latitude), zoom); // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
//map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
}
</script>
</body>
</html>
多媒体
- 多媒体元素标签
-
<audio >标签定义声音 - 属性
- autoplay 如果出现该属性，则音频在就绪后马上播放。
- controls 如果出现该属性，则向用户显示控件，比如播放按钮。
- loop 如果出现该属性，则每当音频结束时重新开始播放。
- muted 规定视频输出应该被静音。
- preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。
如果使用 "autoplay"，则忽略该属性。 - url 要播放的音频的 URL。
-
<vidio>标签定义视频 - 属性
- autoplay 如果出现该属性，则音频在就绪后马上播放。
- controls 如果出现该属性，则向用户显示控件，比如播放按钮。
- loop 如果出现该属性，则每当音频结束时重新开始播放。
- muted 规定视频输出应该被静音。
- preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。
如果使用 "autoplay"，则忽略该属性。 - url 要播放的音频的 URL。
- width height 设置视频播放器的宽高 。
- poster URL 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
- <source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。 - <track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。
用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。 - 事件
- onbort 在退出时运行的脚本
- onplaying 当媒介已经开始播放时运行的脚本
- onpause 当媒介被用户暂停或程序暂停时运行的脚本
- onended 当媒介已经到达结尾时运行的脚本（可发送类似“感谢观看”之类的消息）。
- 拖放
- ondrag 该事件在元素正在拖拽时触发，绑定给被拖动的元素
- ondragstart 开始拖拽元素时触发，绑定给被拖动的元素
- ondragenter 拖拽元素进入放置目标时触发
- ondragover 拖拽元素在放置目标上时触发，绑定给目标元素，需组织默认事件 e.preventDefault()
- ondragleave 拖拽元素离开放置目标时触发
- ondragend 完成元素的拖动时触发，绑定给被拖动的元素
- ondrop 在拖动元素放置在目标区域时触发
- 相关属性
- draggable 设置元素可拖放true/false
*DragEvent - dataTransfer :setData(),getData()
- draggable 设置元素可拖放true/false
-
