svg/多媒体/地理定位

内联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 是否接受的缓存时间
  • 应用 ,百度地图




    
    地图
    
    


    

地图演示


多媒体

  • 多媒体元素标签
    • 标签定义声音
    • 属性
      • autoplay 如果出现该属性,则音频在就绪后马上播放。
      • controls 如果出现该属性,则向用户显示控件,比如播放按钮。
      • loop 如果出现该属性,则每当音频结束时重新开始播放。
      • muted 规定视频输出应该被静音。
      • preload 如果出现该属性,则音频在页面加载时进行加载,并预备播放。
        如果使用 "autoplay",则忽略该属性。
      • url 要播放的音频的 URL。
    • 标签定义视频
    • 属性
      • autoplay 如果出现该属性,则音频在就绪后马上播放。
      • controls 如果出现该属性,则向用户显示控件,比如播放按钮。
      • loop 如果出现该属性,则每当音频结束时重新开始播放。
      • muted 规定视频输出应该被静音。
      • preload 如果出现该属性,则音频在页面加载时进行加载,并预备播放。
        如果使用 "autoplay",则忽略该属性。
      • url 要播放的音频的 URL。
      • width height 设置视频播放器的宽高 。
      • poster URL 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。
    • 标签为媒介元素(比如
    • 标签为诸如 video 元素之类的媒介规定外部文本轨道。
      用于规定字幕文件或其他包含文本的文件,当媒介播放时,这些文件是可见的。
    • 事件
      • onbort 在退出时运行的脚本
      • onplaying 当媒介已经开始播放时运行的脚本
      • onpause 当媒介被用户暂停或程序暂停时运行的脚本
      • onended 当媒介已经到达结尾时运行的脚本(可发送类似“感谢观看”之类的消息)。
    • 拖放
      • ondrag 该事件在元素正在拖拽时触发,绑定给被拖动的元素
      • ondragstart 开始拖拽元素时触发,绑定给被拖动的元素
      • ondragenter 拖拽元素进入放置目标时触发
      • ondragover 拖拽元素在放置目标上时触发,绑定给目标元素,需组织默认事件 e.preventDefault()
      • ondragleave 拖拽元素离开放置目标时触发
      • ondragend 完成元素的拖动时触发,绑定给被拖动的元素
      • ondrop 在拖动元素放置在目标区域时触发
    • 相关属性
      • draggable 设置元素可拖放true/false
        *DragEvent
      • dataTransfer :setData(),getData()

你可能感兴趣的:(svg/多媒体/地理定位)