全栈工程师知识点汇总——html5（下）

二、HTML5（下）

## HTMl5中的API

### 获取页面元素及类名操作和自定义属性

document.querySelector("选择器")；
备注： "选择器"可以是css中的任意一种选择器
通过该选择器只能选中第一个元素。

document.querySelectorAll("选择器");
备注： 与document.querySelector区别：
querySelectorAll 可以选中所有符合选择器规则的元素，返回的是一个列表。
而querySelector返回的只是单独的一个元素。

Dom元素.classList.add("类名"): 给当前dom元素添加类样式

Dom元素.classList.remove("类名"); 给当前dom元素移除类样式

Dom元素.classList.contains("类名"); 检测是否包含类样式

Dom元素.classList.toggle("类名active"); 切换类样式（有就删除，没有就添加）

自定义属性

data-自定义属性名
备注：在标签中，以 data- 接自定义名称

1. 获取自定义属性 Dom.dataset 返回的是一个对象。
Dom元素.dataset.属性名 或者 Dom.dataset[属性名]

注意： 属性名是不包含 data-

2. 设置自定义属性
Dom元素.dataset.自定义属性名=值 或者 Dom.dataset[自定义属性名]=值；

### 文件读取

FileReader
FileReader ---接口有3个用来读取文件方法返回结果在result中
readAsBinaryString ---将文件读取为二进制编码
readAsText ---将文件读取为文本
readAsDataURL ---将文件读取为DataURL

FileReader 提供的事件模型
onabort 中断时触发
onerror 出错时触发
onload 文件读取成功完成时触发
onloadend 读取完成触发，无论成功或失败
onloadstart 读取开始时触发
onprogress 读取中

案例：var input=document.querySelector("input");

input.onchange=function(){

//获取到文件
var file=this.files[0];

//开始读取，创建读取器
var reader=new FileReader();

//开始读取
reader.readAsText(file);

//获取读取的结果
//当文件读取完成后，才可以获取文件信息内容
reader.onload=function() {
console.log(reader.result);
}
}

### 获取网络状态

获取当前网络状态
window.navigator.onLine 返回一个布尔值

例子： //获取当前网络状态
var state=window.navigator.onLine;

if(state) {

alert("您好，当前处于联网状态");

}else {
alert("当前处于断网状态");
}

网络状态事件
1. window.ononline
2. window.onoffline

例子： //当联网的时候触发该事件
window.ononline=function () {

alert("在线");
}

//当断网的时候触发该事件

window.onoffline=function() {

alert("断网");
}

### 获取地理定位

获取一次当前位置
window.navigator.geolocation.getCurrentPosition(success,error);

1. coords.latitude 维度
2. coords.longitude 经度

例子： window.navigator.geolocation.getCurrentPosition(success,error);

//成功获取地理位置时候的回调函数
function success (msg,position) {

console.log(msg,position);
}

//地理位置获取失败时候的回调函数
function error (msg) {
console.log(msg);

}

实时获取当前位置
window.navigator.geolocation.watchPosition(success,error);

例子：window.navigator.geolocation.watchPosition(success,error);

function success (msg,pt) {
console.log(msg,pt);
}

function error (msg) {
console.log(msg);
}

### 本地存储

发展：
随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案，使用sessionStorage和localStorage存储数据。

localStorage：
1. 永久生效
2. 多窗口共享
3. 容量大约为20M

window.localStorage.setItem(key,value) 设置存储内容
window.localStorage.getItem(key) 获取内容
window.localStorage.removeItem(key) 删除内容
window.localStorage.clear() 清空内容

sessionStorage：
1. 生命周期为关闭当前浏览器窗口
2. 可以在同一个窗口下访问
3. 数据大小为5M左右

window.sessionStorage.setItem(key,value)
window.sessionStorage.getItem(key)
window.sessionStorage.removeItem(key)
window.sessionStorage.clear()

### 操作多媒体

http://www.w3school.com.cn/html5/html5_ref_audio_video_dom.asp

## Canvas画布

### 绘图工具

介绍canvas画布
设置画布大小： 必须在<canvas>标签内部，使用属性方式设置。

例子： //获取画布
var canvas=document.querySelector("canvas");

//获取画布上下文对象
var ctx=canvas.getContext("2d");

//绘图步骤： 落笔点->连线->描边

ctx.moveTo(100, 100); //落笔
ctx.lineTo(100, 300); //连线
ctx.stroke(); //描边

### 绘图方法

ctx.moveTo(x,y) 落笔
ctx.lineTo(x,y) 连线
ctx.stroke() 描边

解决画布重绘问题：
1. 只设置一次描边 ctx.stroke();
2. 开启新的图层 ctx.beginPath();

演示： strokeStyle="值" （例：XXX.strokeStyle="red"; 红色的线）

线宽： linewidth="值" （备注：不需要带单位）

线连接方式： lineJoin: round | bevel | miter (默认)

线帽（线两端的结束方式）： lineCap: butt(默认值) | round | square

闭合路径： ctx.closePath()

### 渐变方案

#线性渐变
var grd=ctx.createLinearGradient(x0,y0,x1,y1);

x0-->渐变开始的x坐标
y0-->渐变开始的y坐标
x1-->渐变结束的x坐标
y1-->渐变结束的y坐标

grd.addColorStop(0,"black"); 设置渐变的开始颜色
grd.addColorStop(0.1,"yellow"); 设置渐变的中间颜色
grd.addColorStop(1,"red"); 设置渐变的结束颜色

ctx.strokeStyle=grd;
ctx.stroke();

备注：
addColorStop(offse,color);
渐变的开始位置和结束位置介于0-1之间，0代表开始，1代表结束。
中间可以设置任何小数。

#径向渐变

ctx.createradialGradient(x0,y0,r0,x1,y1,r1);

(x0,y0)：渐变的开始圆的 x,y 坐标

r0：开始圆的半径

(x1,y1)：渐变的结束圆的 x,y 坐标

r1：结束圆的半径

### 填充效果

ctx.fill(); 设置填充效果
ctx.fillstyle="值"; 设置填充颜色

#非零环绕原则（案例：回字图形，只填充外部的区间）

出现非零环绕的前提：
1、绘制的是一个闭合图形。
2、假如在绘制的时候，出现绘制顺序有顺时针和逆时针。

非零环绕原则：
1. 任意找一点，越简单越好
2. 以点为圆心，绘制一条射线，越简单越好（相交的边越少越好）
3. 以射线为半径顺时针旋转，相交的边同向记为+1，反方向记为-1，如果相加的区域等于0，则不填充。
4. 非零区域填充

### 绘制虚线

原理：

设置虚线其实就是设置实线与空白部分直接的距离,利用数组描述其中的关系

例如： [10,10] 实线部分10px 空白部分10px

例如： [10,5] 实线部分10px 空白部分5px

例如： [10,5,20] 实线部分10px 空白5px 实线20px 空白部分10px 实线5px 空白20px....

绘制：
ctx.setLineDash(数组);
ctx.stroke();

例子：
ctx.moveTo(100, 100);
ctx.lineTo(300, 100);
ctx.setLineDash([2,4]);
ctx.stroke();

注意：
如果要将虚线改为实线，只要将数组改为空数组即可。

### 绘制动画效果

例子：绘制矩形并清除。

//获取canvas画布对象
var canvas =document.querySelector("canvas");
//获取绘图上下文
var ctx=canvas.getContext("2d");
ctx.rect(100, 100, 200, 200);
ctx.stroke();
ctx.clearRect(0, 0, 600, 400);

绘制一个描边矩形： content.strokeRect(x,y,width,height)
绘制一个填充矩形： content.fillRect(x,y,width,height)
清除： content.clearRect(x,y,width,height)


实现动画效果：
1. 先清屏
2. 绘制图形
3. 处理变量

例子：绘制一个动态矩形。

//获取canvas画布对象
var canvas =document.querySelector("canvas");
//获取绘图上下文
var ctx=canvas.getContext("2d");

//开始位置
var x=0;
//处理的是一个增量
var step=5;
//改变的方向的
var i=1;

//创建一个定时器
setInterval(function(){
//先清屏
ctx.clearRect(0, 0, canvas.width, canvas.height);
//开始绘制图形
ctx.fillRect(x, 100, 100, 200);
//开始处理变量（改变移动的方向）
x+=step*i;
if(x>canvas.width-100){
i=-1;
}else if(x<0){
i=1;
}
},20);

### 绘制文本

绘制填充文本
content.fillText(文本的内容 ,x ,y )

绘制镂空文本
content.strokeText();

设置文字大小：
content.font="20px 微软雅黑"
（备注： 该属性设置文字大小，必须按照css font属性的方式设置）

文字水平对齐方式【文字在圆心点位置的对齐方式】
content.textAlign="left | right | center"

文字垂直对齐方式
content.textBaseline="top | middle | bottom | alphabetic(默认)"

文字阴影效果
ctx.shadowColor="red"; 设置文字阴影的颜色

ctx.ShadowOffsetX=值; 设置文字阴影的水平偏移量

ctx.shadowOffsetY=值; 设置文字阴影的垂直偏移量

ctx.shadowBlur=值; 设置文字阴影的模糊度

### 绘制图片

//将图片绘制到画布的指定位置
content.drawImage(图片对象,x,y);

例子： //获取canvas画布对象
var canvas =document.querySelector("canvas");
//获取绘图上下文
var ctx=canvas.getContext("2d");

//将图片绘制到画布的指定区域
var img=document.createElement("img");
img.src="1.jpg";

img.onload=function(){
ctx.drawImage(img, 0, 0);
}

//将图片绘制到指定区域大小的位置 x,y指的是矩形区域的位置，width和height指的是矩形区域的大小
content.drawImage(图片对象,x,y,width,height);

//将图片的指定区域绘制到指定矩形区域内
content.drawImage(图片对象,sx,sy,swidth,sheight,dx,dy,dwidth,dheight);

sx,sy 指的是要从图片哪块区域开始绘制，
swidth，sheight 是值 截取图片区域的大小
dx,dy 是指矩形区域的位置，
dwidth,dheight是值矩形区域的大小

#解决图片绘制到某一个区域的按“原比例”缩放绘制：

绘制宽：绘制高==原始宽：原始高

### 绘制圆弧

content.arc(x,y,radius,startradian,endradian[,direct]);

x,y 圆心的坐标

radius 半径

startradian 开始弧度

endradian 结束弧度

direct 方向（默认顺时针 false） true 代表逆时针

0度角在哪？（三点钟方向）
以圆心为中心向右为0角 顺时针为正，逆时针为负

备注：
角度 和 弧度的关系： 角度:弧度= 180:pi

特殊值：

0度 = 0弧度

30度 = π/6 (180度的六分之一)

45度 = π/4

60度 = π/3

90度 = π/2

180度 = π

360度 = 2π


绘制圆上任意点：

公式：
x=ox+r*cos( 弧度 )

y=oy+r*sin( 弧度 )

ox: 圆心的横坐标

oy: 圆心的纵坐标

r： 圆的半径

### 平移【坐标系原点的平移】

ctx.translate(x,y);

特点：
通过该方法可以将原点的位置进行重新设置。

注意：
1. translate(x,y) 中不能设置一个值

2. 与moveTo(x,y) 的区别：

moveTo(x,y) 指的是将画笔的落笔点的位置改变，而坐标系中的原点位置并没有发生改变

translate(x,y) 是将坐标系中的原点位置发生改变

### 旋转【坐标系旋转】

ctx.rotate(弧度)

### 伸缩

ctx.scale(x,y)

备注：
沿着x轴和y轴缩放

x,y 为倍数 例如： 0.5 1