无标题文章

SVG

svg和canvas的区别

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

svg使用XML来绘制图片， canvas使用JavaScript来绘制图片

svg的兼容性好， canvas需要兼容H5的浏览器

svg可以给每个图形绑定事件， canvas不可以

svg的应用领域

图标

地图

绘制图形

矩形

圆形

多边形

路径

.....

在HTML中使用SVG

直接在html中写svg

地理定位

navigator.geolocation

getCurrentPosition(successCallback, errorCallback, options)

watchPosition(successCallback, errorCallback, options)

clearWatch() 结束监听

successPositon

coords

latitude 纬度

longitude 经度

altitude 海拔

speed 速度

heading 前进方向

accuracy 坐标经度

altitudeAccuracy 海拔经度

timestamp 时间戳

errorPosition

code

message

选项

timeout 超时时间 enableHighAccuracy 是否得到最佳效果 true/false maximumAge 缓存时间

注意

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

多媒体

多媒体标签

DOM 属性

volume 获取或设置 音量

muted 是否静音

....

DOM 方法

play() 播放

pause() 暂停

.....

DOM 事件

onplay

onpause

....

视频插件

ckplayer falsy/h5

jplayer falsh/h5

flowplayer falsh/h5

video.js h5

flv.js flash

拖拽 API

属性

draggable 所有的元素都有 true/false 控制元素是否可以被拖动

事件

dragenter 绑定目标元素 拖拽元素进入目标元素 用于目标元素的样式

dragleave 绑定目标元素 拖拽元素离开目标元素 同上

dragover 绑定目标元素 拖拽元素在目标元素上移动 一般需要组织默认事件 event.preventDefault();

drop 绑定目标元素 拖拽元素放置在目标元素 上时触发

dragstart 绑定拖拽元素 拖拽开始

dragend 绑定拖拽元素 拖拽结束

drag 绑定拖拽元素 拖拽过程中一直触发

dragEvent

dataTranfer 用于不同event之间的数据交换

setData（key,value）

getData(key)

作业

整理笔记

代码 1遍

使用video/audio dom API 自定义 音乐播放器

附录

百度地图APIKey： B8cfd1501ae7f7c55dc3793ee989c354

视频地址：

http://movie.ks.js.cn/flv/other/1_0.mp4

http://movie.ks.js.cn/flv/other/1_0.flv

常用视频播放插件：