H5api的学习

H5api
html5的标签和语法
js操作

1）语义化标签*
div
块级元素
header
footer
aside
nav
artcile
功能元素
进度条

input
placeholder 文本框内的文字
type
number
date
month

2）音/视频
video
属性
src 加载资源地址
controls 显示控件
autoplay 自动播放
duration 视频的整体长度
currentTime 视频播放的进度
volum 视频的音量
paused 是否暂停
playbackRate 视频播放速度
方法
play()
pause()
load()
//保留小数 toFixed()

3）画布
canvas
是一个标签，也是一个容器，用来接受画布的元素，本身不存在绘制图形的能力，需要利用js进行图形的绘制

1.矩形
1）获取canvas对象
2）获取2d上下文对象
3）设置样式
填充样式
描边样式
4）设置线宽
5）绘制图形

2.圆形
1）获取canvas对象
2）获取2d上下文对象
3）设置样式
填充样式
描边样式
4）设置线宽
5）开始路径
context.beginPath()
6）设置路径
context.arc()
x,y,r,开始角度,结束角度,boolean(false顺时针，true逆时针)
弧度 -> 角度
Math.PI/180*startAngle
7）关闭路径
context.closePath()
8）绘制圆形

3.渐变色
1）获取canvas对象
2）获取2d上下文对象
3）创建渐变对象
x,y,x,y
4）为渐变对象添加渐变色
5）将渐变对象赋值给填充样式
6）绘制图形

4.图片
1）获取canvas对象
2）获取2d上下文对象
3）创建图片对象
4）绘制图片
需要在图片加载完毕之后再绘制
5）绘制平铺图片
createPattern(image,‘repeat-x’)
context.fillStyle = pattern;
context.fillRect()

5.文字
1）获取canvas对象
2）获取2d上下文对象
3）设置样式
填充样式
描边样式
4）设置线宽
5）设置字体
字体大小
context.font = ‘10px sancs-serif’
字体对齐方式
context.textAlign = ‘center’
6）绘制字体

4）拖拽
1）属性
draggable 将元素设置为可拖动

2）事件
拖拽元素
dragstart 开始拖拽
drag 正在拖拽
dragend 结束拖拽
目标元素
dragenter 拖拽元素进入到目标元素
dragover 拖拽元素在目标元素中移动
drop 拖拽元素放甚在目标元素

3）拖拽的事件流

4）将拖拽元素放置到目标元素中
前提
1.拖拽元素可拖拽
2.目标元素可防止
在dragover时阻止默认行为

event.dataTransfer.setData(‘key’,val)
在开始拖拽时设置数据
event.dataTransfer.getData(‘key’)
在拖拽元素放置到目标元素时获取数据
event.dataTransfer.removeData(‘key’)
移除数据
event.dataTransfer.clear()
清空所有的数据

5）存储*
1）cookie
2）session
sessionStorage.setItem(‘key’,‘value’)
sessionStorage.getItem(‘key’)
sessionStorage.key
sessionStorage.removeItem(‘key’)
sessionStorage.clear()

3）localStorage *
localStorage.setItem(‘key’,‘value’)
localStorage.getItem(‘key’)
localStorage.key
localStorage.removeItem(‘key’)
localStorage.clear()

6）websocket