HTML5 高级
1.新增标签
<header>：头部标签。<nav>：导航标签。<article>：内容标签。<section>：某个区域。<aside>：侧边栏标签。<footer>：尾部标签...
2.video 视频
1. 元素
src 指定音频文件路径，必须要有
controls 显示播放控件
loop 视频播放结束后自动重新播放
loop='n' 循环两次
muted 静音
autoply 视频在就绪后马上播放(在静音前提下)
poster 用于在视频加载时或用户在点击播放前显示的图片,属性值是图片路径
preload 页面加载时就开始加载音频，并预备播放.如果使用了“fautoplay”属性，preload属性不会生效
auto 尽可能的加载视频
metadata 预先加载元数据(视频时长,大小等)
none 不预先加载
width属性和height属性:
1.width属性:设置视频窗口宽度，height属性:设置视频窗口高度
2.不设置，视频窗口会按原始尺寸显示
3.如果只设置1个属性，另一个会根据已设置的属性等比例缩放
4.如果2个属性都设置，可能会变形
5.默认单位为像素，也可以使用百分比
2. 方法
播放方法 视频元素.play()
暂停视频 视频元素.pause()
3. 属性
1. 声音
视频元素.volume
2. 视频是否暂停
视频元素.paused
3. 倍速
视频元素.playbackRate=n
4. 获取视频的总时长
视频元素.duration
5. 当前播放时长
视频元素.currentTime
4. 事件
视频的状态不是人为触发的,所以需要监听视频的状态
写法:视频元素.addEventListener('事件名称',function(){事件发生时执行内容})
事件:
1. paly 视频播放的时候触发
2. pause 视频暂停的时候触发
3. canplaythrough 视频准备好播放的时候
4. timeupdate 当前时间更新了
audio 音频
1. 元素
src 指定音频文件路径，必须要有
controls 显示播放控件
loop 视频播放结束后自动重新播放
loop='n' 循环两次
muted 静音
autoply 视频在就绪后马上播放(在静音前提下)
poster 用于在视频加载时或用户在点击播放前显示的图片,属性值是图片路径
preload 页面加载时就开始加载音频，并预备播放.如果使用了“fautoplay”属性，preload属性不会生效
auto 尽可能的加载视频
metadata 预先加载元数据(视频时长,大小等)
none 不预先加载
2. 方法
播放方法 元素.play()
暂停方法 元素.pause()
3.form表单新增属性
1. input属性
1. maxlength 最大输入长度
2. minlength 最小输入长度
3. placeholder 输入提示
1. input标签type属性
1. text 文本框
2. number 只能输入数字
3. color 选择颜色
4. date 选择年月日
5. month 选择年月
6. week 选择周日
7. time 选择时间
8. email 输入邮箱 需有@,且@后不能为空
9. url 输入地址 需包含协议
4.canvas绘图
绘制图形
坐标 x轴 y轴
x向右变大y轴向下变大
交叉点为原点
1. 创建一个画布
<canvas id="c1"></canvas>
2. 获取画布对象
var c1 = document.getElementById('c1')
3. 通过画布对象 调取画笔
var ctx = c.getContext("2d")
4. 设置画笔
粗细
ctx.lineWidth=1;
描边颜色
ctx.strokeStyle='#000';
填充颜色
ctx.fillStyle='#000';
5. 绘制矩形
描边矩形ctx.strokeRect(x,y,w,h);
实心矩形ctx.strokeRect(x,y,w,h);
6. 清除图形
xtx.clearRect(x,y,w,h);橡皮擦的大小,把橡皮擦区域图形清掉
绘制文字
1. 创建一个画布
<canvas id="c1"></canvas>
2. 获取画布对象
var c1 = document.getElementById('c1')
3. 通过画布对象 调取画笔
var ctx = c.getContext("2d")
4. 获取字体的大小和样式
ctx.font='字体大小字体样式'
5. 设置基线
ctx.textBaseline='top';
6. 绘制文字
ctx.fillText('要绘制的文字',x,y);
7. 描边
ctx.strokeStyle
8. 获取文本宽度
var w = ctx.measureText('hello').width;
绘制多边形 path 路径
1. 创建画布
2. 获取画布,获取画笔
3. 开始一个路径
ctx.beginPath();
4. 移动到指定点
ctx.moveTo(x,y);
5. 从当前指定点画一条线
lineTo(x,y);
...
6. 闭合路径
closePath();
7. 描边或填充
ctx.stroke();
ctx.fill();
弧度
1. 创建画布
2. 获取画布,获取画笔
3. 画弧度
ctx.arc(cx,cy,r,start,end);
半径 开始弧度 结束弧度 单位π:pi
4. 弧度 = 角度*Math.pi/180
绘制图片
1. 创建画布
2. 获取画布,获取画笔
3. 创建图片对象
var img = new Image();
4. 下载图片
img.src='https://www...';
5. 要等到图片下载完成才能绘制图片
绑定加载完成事件
img.onload=function(){
ctx.drawImage(img,x,y); 绘制原图大小
ctx.drawImage(img,x,y,w,h); 绘制指定图片大小
}
6. 获取图片宽高
img.width
img.height
获取画布宽高
c1.width
c1.height
画布事件
1. 给画布绑定事件
给画布绑定鼠标移动事件 onmousemove
画布.onmousemove=function(e){e指event对象,只要事件触发,对象就会被创建,就会产生获取鼠标的x轴坐标
e.offsetX;
e.offsetY;
}
2. 图片旋转
图片旋转实际是画笔旋转
ctx.rotate(旋转弧度);
图片默认是围绕(0,0)旋转的,不能改变图片的旋转中心,但是可以改变(0,0)的位置
平移旋转中心//把xy这个点改成(0,0)点
ctx.translate(x,y);
如果图片想要围绕自己的中心旋转,就把图片的中心画到(0,0)
如果出现画笔需要两种状态来回切换
首先,画笔保存初始化状态,在进入第一种状态操作,操作完成之后需要恢复初始化状态
恢复后,再保存当前初始化状态进入第二种状态操作,操作完成之后恢复初始化状态
保存初始化状态: ctx.save();
恢复初始化状态: ctx.restore();
渐变
1. 创建渐变对象
var g = ctx.createLinearGradient(x1,y1,x2,y2);
x1,y1 渐变线条的起点
x2,y2 减不线条的终点
两个点确定一条线,一条线确定一个方向
2. 添加颜色节点
g.addColorStop(offset,color);
offset: 线的比例 0.0~1.0
color: 颜色
例子: g.addColorStop(0.3,'#f00'); 在线的百分之三十的位置是红色
3. 把渐变对象赋值给画笔样式
ctx.fillStyle=g;
或ctx.strokeStyle=g;
4. 绘制图形
canvas总结:
文本 Text();
多边形 Path();
弧度 arc(cx,cy,r,start,end);
图片 Image();
旋转 rotate();
渐变 createLinearGradient()
5.svg绘图
canvas和svg的区别
canvas是html5的新技术,svg并不是html专属,svg早在十几年前已经有了
canvas类似一个画布,在画布上画的图形是标量图,所以canvas可以在上面绘制png jpg等标量图
svg绘制的是矢量图,比如百度地图
在实际开发过程中,大型网游,都是用canvas绘制
地图都是用svg绘制
- 所有的图形默认填充黑色
- svg可以使用样式声明属性,也可以使用css样式声明,但是css只能声明svg格式专用的属性样式,不能使用css样式
比如: 加边框只能用stroke,不能用border - 图形也可以使用js赋值
svg绘图的两种方式
- html 直接在svg标签里添加形状标签
- js 在js创建图形标签,设置标签属性,添加到svg标签中;
创建标签
var tagname = document.createElementNs('http://www.w3.org/http://www.w3.org/2000/svg',rect);
第一个参数是 SVG的标准 第二个参数是标签名
设置属性
标签对象.setAttribute('属性名',属性值);
添加元素
画布对象.appendChild(标签对象);
图形名称
矩形 rect
属性:
x,y 左上角位置坐标
width 矩形宽度
height 矩形高度
stroke 矩形描边
fill 矩形填充
fill-opacity 矩形设置透明度
圆形 circle
属性:
cx,cy 圆心位置坐标
r 半径
stroke 描边
fill 填充
fill-opacity 透明度
拖拽
7个事件 2组
1,原对象 (拖着移动)
ondragstart 开始拖拽
ondrag 正在拖拽
ondragend 拖拽结束
整个过程 ondragstart *1 + ondrag*n + ondragend*1
2,目标对象(不会移动)
ondragenter 拖拽进入
ondragover 拖拽悬浮
ondragleave 拖拽离开
ondrop 拖拽松手(释放)
元素拖拽 需要元素具备拖拽能力
img的draggable默认是true
a的draggable默认是true
其他元素想要拖拽,需要增加属性
draggable=true
6.数据储存Web Storage
目前浏览器常用储存
1. cookie*
2. flash
3. h5*
4. indexDB
cookie的优缺点
优点: 兼容性好
缺点：1. 大小限制在4KB
2. 占用宽带
3. 书写复杂
session 一次会话
h5中新增的储存
1. sessionStorage
将数据储存在sessionStorage中,会话开始,开始保存数据,同一个会话,打开其他网页,
都可以访问到sessionStorage储存的数据,一旦浏览器关闭sessionStorage将会清除
步骤:
1.存数据
sessionStorage[key]=value; /
sessionStorage.setItem(key,value);
2.取数据
var value = sessionStorage[key]; /
var value = sessionSrotage.getItem(key);
3.清除缓存
sessionStorage.removeItem(key); 清除一个数据
sessionStorage.clear() 清除全部数据
2. localStorage 本地储存,跨会话,永久储存
使用步骤:
1.存数据
localStorage[key]=value; /
localStorage.setItem(key,value);
2.取数据
var value = localStorage[key]; /
var value = localStorage.getItem(key);
3.清除缓存
localStorage.removeItem(key); 清除一个数据
localStorage.clear() 清除全部数据
4.localStorage.length 获取数据条数
localStorage.key(i) 给出索引返回的key值
7.地理定位 Geolocation
手机浏览器获取地理定位:
1.手机带的GPS芯片与网络连接起来。(首选)
民用：精确到米；军用：精确到厘米。
2.手机通讯基站
HTML5 提供了获取地理位置的对象
navigator.geolocation(
//获取当前定位
getCurrentPosition:fun()
//监视位置变化
watchPosition:fun()
//取消监听
clearPosition()
)
目前国内地图厂商
1.百度地图
2.高德地图
3.腾讯地图
步骤:
1.注册百度地图开发账户(邮箱)
2.分配ak秘钥
3.在地图中嵌入秘钥
后面到百度地图官网有教程
211
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
