svg/多媒体/地理定位

作者: 细雨衔雪 | 来源:发表于2017-06-08 19:44 被阅读0次

svg/多媒体/地理定位
无标题文章
基于fabric的地图定位，SVG热力地图
HTML5文件读取接口
HTML5新特性
svg 画圆
样式冲突造成svg图标显示不完整
HTML5新增API总结
HTML5 Geolocation（地理定位）
HTML5地理定位

内联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 时间
errorPosition对象 ,错误回调函数的参数
- code 错误代码
  - 用户未授权
  - 不能确定位置
  - 超时
- message 错误信息
选项
- 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()