H5 新特性05

SVG

svg与canvas的区别

    canvas绘制的是位图， svg绘制的是矢量图

    canvas使用JavaScript进行绘制； svg使用XML进行绘制

    canvas无法给每个图形绑定事件； svg可以给每个图形绑定事件

    兼容性不同。 svg的兼容性更好

    应用领域不同

svg的应用领域

    图标

    地图

XML

    可扩展标记语言

svg的使用

    在html中 使用<svg>

    独立的svg文件，html中引用

地理定位

    navigator.geolocation

        getCurrentPosition(successCallback, errorCallback, options)

        watchPosition(successCallback, errorCallback, options)

        clearWatch(wid)

    position 成功回调函数 自动获取

        coords

        latitude 纬度

       longitude 经度

       altitude 海拔

       heading 前进方向

       speed 速度

       accuracy 坐标精度

       altitudeAccuracy 海拔精度

    timestamp

errorPosition 失败回调函数 自动获取

    code

    message

注意

        chrome\firefox 等大部分浏览器 需要 https的网页才能获取位置

多媒体操作

DOM 方法

    * play()

    * pause()

DOM 属性

    * volume

    * muted

DOM 事件

    * playing

    * play

    * psuse

    * ....

拖放

    属性

        draggable true/false

    事件

        dragstart 被拖拽元素 拖拽开始

        drag 被拖拽元素 拖拽过程中不停的触发

        dragend 被拖拽元素 拖拽结束

        dragenter 目标元素 被拖拽元素进入目标元素 设置样式

        dragleave 目标元素 被拖拽元素离开目标元素 设置样式

       dragover 目标元素 被拖拽元素在目标元素内的时候不停触发。 取消时间默认操作event.preventDefault()

drop 目标元素 当被拖拽元素在目标元素内放下的时候。

dragevent

dragevent.dataTransfer