无标题文章

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

常用视频播放插件:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • <!doctype html> 事件是 Web 应用中不可或缺的一个东西,用户在应用中执行一个操作的时候,比如鼠标...
    JS大神阅读 2,790评论 0 0
  • 网页基础总结(4) 一.网页基础 1.选择器优先级关系 !important>ID>类>元素 内联样式表>嵌入>外...
    糖心m阅读 1,469评论 0 0
  • WebView·开车指南 2016-08-31BugDev 北京市东城区首席Bug布道师开山之作,一整月交通事故血...
    53c021c38a1d阅读 4,282评论 0 1
  • 他们真的很优秀。 我真的很害怕。 郭鹏飞、赵云、冯宝华、韩爽、王丽娜、于佳明、张文玉……在社团、学生会独当一面的,...
    香丘阅读 1,553评论 0 0
  • 如今,面对越来越多的出轨、离婚、双方不和等各种情感问题,我们作为旁观者为什么会有如此之多的评判? 谁对谁错,到底谁...
    礼雪晶阅读 3,229评论 3 14