． html5 rect()、fillrect()、strokeRect()的区别
2． rect() 方法是单纯的画出一个矩形框，调用stroke() 或 fill()后才会真正作用于画布。
3． .fillRect() 方法是画出一个有填充颜色的矩形框（默认是黑色的）
4． strokeRect() 方法是用一个预定义的笔触画出一个矩形框，你就可以想成使用一直有颜色的画笔去画一个矩形。
fillStyle是设置矩形框内部区域的填充颜色，strokeStyle是设置矩形边框的颜色，后两种方法可以同时使用，搭配画出一个内部有填充颜色，边框线条也带颜色的矩形。
5. 保存和恢复canvas的状态
Ctx.save()保存到堆中，ctx.restore(),恢复状态，save是把画的画布上的一些样式设置保存下来，通过restore()方法调用保存的图形样式，在画图时就是用的你所保存的样式来画图。
6. Canvas 平移，旋转，缩放
Translate() 两个·参数，一个是x轴平移距离，一个是y轴平移距离
Rotate()旋转度数 度数乘以Math.PI除以180
Scale()缩放() 两个参数，一个x轴缩放倍数，一个是y轴缩放倍数
7.canvas图片组合裁剪
globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。
源图像 = 您打算放置到画布上的绘图。
目标图像 = 您已经放置在画布上的绘图。
ctx.fillStyle=“red”;
ctx.fillRect(20,20,75,50);目标图像
ctx.globalCompositeOperation=“source-over”;
ctx.fillStyle=“blue”;
ctx.fillRect(50,50,75,50);源图像
8.样式css 有四种 行内样式，内嵌式，外联式，导入式 @import(url()),导入式缺点是必须是html 加载完毕才会加载css，会造成样式混乱。
9.css选择器 标签选择器 类选择器 ID选择器 css 里空格代表/ 下的 逗号代表和
+选择器是紧随的同级元素元素所有元素~后面所有的同级元素>表示子元素的
A[title]设置了title属性的a标签，设置了什么属性的什么元素，元素[属性]
元素[属性=属性值]：属性的属性值为这个值的元素。元素[属性^=值]以这个值开头的属性的元素，元素[属性$=属性值]以这个值结尾的属性的元素 元素[属性=属性值]这个属性的属性值包含这个值的元素。
10.常用属性 text-decoration样式设置下划线，上划线，删除线等。
Text-transform 样式设置文本大小写。
Letter-spacing 设置文本文字间距
Overflow:hiddle 是内容超出部分隐藏，auto是内容超出显示滚动条scroll 内容超不超出都显示滚动条
11.隐藏display：none隐藏不占位，visibility:hiddle 隐藏占位z-index控制一个块元素的层级
12背景图片background-attachment:fixed,固定背景图片到窗口某些位置background-repeat是否重复平铺慢整个区域。Background:颜色url(路径) 是否重复，是否固定，背景左边距与上边距。
13. 旋转度数 transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 /
-moz-transform:rotate(30deg); / Firefox /
-webkit-transform:rotate(30deg); / Safari 和 Chrome /
-o-transform:rotate(30deg); 欧朋
14. li 设置一些li标签的样式list-style-type 设置li标签前边的小点样式list-style-image设置标签之前显示图片
15.vertical-align 设置行内元素对齐方式有text-top,middle,text-bottom
cursor:pointer,设置光标样式pointer 小手，wait 是加载圆圈，help是带问号
16.超链接爱恨原则，love hate link visited hover active
17. border-collapse:collapse; 为表格设置合并边框
18. 块级div p form menu h1-h6 table pre ol li ul li dl dt
行内 a span label input label textarea img strong select
19. calc(100%-100px),计算百分比减去固定长度的差
20.去除浮动用clear :left right both 清除左，右，全部浮动。
21.css 伪类 常用的伪类有 元素:first-chaild 第一个子元素 a标签的各个状态
元素:disabled 不可编辑的 元素:enable 可以编辑的 元素:checked 被选中的 元素:foucus 获取焦点 元素:read-only 只读的 元素:read-write 可读可写的
Css3 新加的伪类，元素:nth-child() 父元素的第几个元素 元素:nth-last-child() 父元素的倒数第几个元素 ；元素:nth-of-type() 父元素的第几个本元素，:nth-last-of-type() 父元素的倒数第几个元素； 元素:first-child 父元素的第一个元素是这个元素 元素:last-child 父元素的最后一个元素是这个元素; 元素:first-of-type 父元素的第一个这个元素 元素:last-of-type 父元素的最后一个这个元素
22.css伪元素 p::before {content:””;}元素首部添加伪元素 p::after{content:””;}元素尾部添加伪元素 p::first-letter 元素内容首字母或者是首汉字 p::first-line 元素内容第一行 ::selection{} 选中状态的内容
Css 伪类和伪元素前边可以添加是那些元素的样式，不添加就是所有符合条件的元素样式
23.数组方法有map(),filter(),splice(),slice(),filter()可以去重
24. @keyframes定义关键帧，即动画每一帧执行的是什么，animation是来定义动画的每一帧如何执行的。立即播放。
animation：animationname动画名称 执行时间 播放次数 动画速度
@keyframes animationname {keyframes-selector {css-styles;}} 帧选择器，用百分比定义，0%-100%，与from-to等价，作用是定义不同时间段的不同样式。
@keyframes animationname {
from { transform: rotate(0deg);}
50% { transform: rotate(180deg);}
to { transform: rotate(360deg);}
}
25.Css 定位
绝对定位 ：1.绝对定位是脱离了文档流，不会单独占满一行，它的方位只会受到top,left,bottom,right的影响。
2. 一个绝对定位的块的top,left, bottom,right 是相对于什么呢？
1） 如果它父元素做了定位，就相对于的是最近的一个父元素
2） 父元素没有定位，就相当于BODY
相对定位：相对定位没有脱离文档流，会单独占满一行，他的方位只受到top，left，bottom，right的影响。
相对定位的top,left,bottom,right是相对于最近的一个父元素
固定定位：1固定定位脱离了文档流，不会单独占满一行。
2， top,left,right,bottom 始终相对于body
Top,left,right,bottom 只有设置了定位（绝对，相对，固定）的时候才有用。
26.css3 文字阴影 text-shadow:水平位移 垂直位移 半径 颜色；半径越大越模糊。
Text-indent 文字缩近；会被继承。
文本断行 word-break:break-all;通过字符断行
Word-wrap:break-wordl 通过汉字或者单词断行
White-space:nowrap:强制文本不换行
text-overflow:ellipsis;超出部分显示省略号
css3动画属性 transform:rotate(0deg)旋转度数 translate（x,y） 平移 scale()缩放直接写倍数大于1为放大，小于一为缩小 skew(xdeg，ydeg)倾斜x轴倾斜多少度 y轴倾斜多少度。 Transition:css过渡效果属性 过度效果时间 过度效果速度 过渡效果开始时间。
当第一个属性是 all 所有属性都有过度效果 ，通常是由事件触发。
当图片尺寸小于放置的区域尺寸不能重复时可以强制铺满整个区域background-size:cover;
27.vue页面返回保留原来的页面参数，用keep-alive包含router-view 在路由里加入参数mata{keepAlive:true}true不刷新 false 刷新设置是否刷新参数
beforeRouteLeave(to, from, next) {
if (to.path == “/index”) {
to.meta.keepAlive = true;
} else {
to.meta.keepAlive = false;
}
next();
}
beforeRouteLeave：离开路由之前执行的函数通过设置路由参数控制是否刷新页面
beforeRouteEnter(to, from, next){
next(vm=>{
console.log(from)
var b = (JSON.stringify(from.query) == “{}”);
console.log(b)
if(!b){
console.log(“bbbbbbbbbb”)
}
}else{
// vm.pay_status = ‘all’;
};
console.log(“cccccccccc”)
vm.getList();
});
beforeRouteEnter：进入路由之前执行的函数。通过state控制筛选参数控制是否刷新页面
28.vue架构优化
路由优化 () => import(URL), webpack2官网推荐使用,属于es7范畴,需要配合babel的syntax-dynamic-import插件使用。
component: () => import(/ webpackChunkName: ‘home’ */’@/pages/Home’)
组件优化
不常见标签u是下划线，s是删除线，sup是上标，sub是下标
ol li 标签是有序的 ul li 标签是无序的，dl dt dd 是自定义列表
pre预定义文本标签保留空格和换行符
当需要显示html标签的时候对html标签进行转义
缩写说明标签
cellspacing单元格间距cellpadding单元格内间距colspan是合并列，rowspan是合并行
超链接跳转打开新窗口用的是target属性控制target=”_blank”
页面之间的嵌套用iframe标签，target属性直还有_top顶层_parent上一级
选择单选按钮点击文字起选中作用，为单选按钮添加id，将文字写入label标签 在label标签里写明for=”id”
header nav footer article 文章 评论section 章节 aside 与内容有关的推荐
hgroup 标题组合 figure标签规定的独立流内容
datalist定义选项列表，文本框与下拉选项的结合，和输入框input 里list属性绑定datalist 的id
details定义文档细节menu普通列表及菜单
progress 进度条标签 属性value max最大值
mark高亮显示标签，time标签
H5新增表单元素 input type=email 自动验证邮箱格式type=url 验证输入值是否是一个有效的网址 type= tel 验证输入值是否是一个手机号 type =number 验证输入值是否是一个数字，还可以设置最小值min和最大值max以及每次增加减少的单位step type= range进度条 和number属性一样
Type=color 颜色面板 type=date 输入日期 type=month 年月 type = week 周几
h5新增表单元素的属性 input type=file 上传文件 添加了新的属性multiple=”multiple”可以上传多个文件
input 输入框pattern 属性可以自定义输入格式用正则表达式验证，title属性也可以自定义错误提示 required 属性验证输入址不能为空
p标签设置属性contenteditable = true 标签内容可以编辑更改 设置hidden =hidden p标签就会隐藏
a标签的tabindex 可以设置按tab键时默认的选中顺序
cookie存储会向后台发出请求获取cookieid，占用带宽，大小有限制只能存储4kb
往localStrorage.setItem(“key值”，内容)，getItem(“key值”),localStrorage.clear() 清除浏览器所有缓存，默认存储字符串String，大小为5m左右，浏览器不同存储大小也不同
var storage=window.localStorage;
//写入a字段
storage[“a”]=1;
//写入b字段
storage.a=1;
//写入c字段
storage.setItem(“c”,3);
//第一种方法读取
var a=storage.a;
console.log(a);
//第二种方法读取
var b=storage[“b”];
console.log(b);
//第三种方法读取
var c=storage.getItem(“c”);
console.log©;
改值
storage.a=4;
console.log(storage.a);
删除某个键值
storage.removeItem(“a”);
存json对象时先将json对象用JSON.stringify()转换成json字符串
读取json对象要先将json字符串用JSON.parse()转换成json对象。
22．H5建立前台数据库
1先建立本地数据库对象
var db = openDatabase(‘myDB’,’1.0’,’test db’,201410),数据库名称，数据库版本，数据库描述，数据库大小。
数据库建表,通过声明的数据库对象，调用transaction事务，然后调用事务对象的方法执行·sql
db.transaction(function(fx){
fx.executeSql(“create table if not exits UserInfor(UserName TEXT,Pwd TEXT)”,[],function(){},function(){})
})
}
executeSql方法 有四个参数 第一个参数是sql语句 判断表是否存在，不存在就新建一张表，写明表的名称，以及表里的字段，及字段类型。第二个参数是数据操作参数传值等，第三个参数是sql执行成功函数，第四个函数时sql执行失败的函数。
往数据库里插入数据
fx.executeSql(“insert into 表名values(?,?)”,[对应字段值，字段值],function(){alert(“添加成功”)},function(){alert(“添加失败”)})
在数据库里查询数据
var sql = “select * from 表名where 1=1 ”
sql = sql + “and 字段名=’”+字段值+”’”
db.transaction(fx){
fx.executeSql(sql,[],function(fx,rs){
for(let i= 0 ;i<rs.rows.length;i++){
var s = ‘
’+rs.rows.item(i).字段名+“
”
标签.append(s)
}
})
}
删除
sql delete from 表名 where 字段名=?,[字段值]
修改 update from 表名 where 字段名=？，[字段值，修改值]
23
h5 canvas
canvas 画二维图形
先获取二维环境
var c = document.getElementById(“”)
var ctx = c.getContext(“2d”) 已经获取到了二维环境
矩形
ctx.fillRect(x轴，y轴，宽度，高度)（0,0,200,200）从坐标0，0 开始画一个宽200，高200的矩形
ctx.fillStyle=””设置图形样式
直线
ctx.moveTo(0,0)起点坐标
ctx.lineTo(200,200)终点坐标
ctx.stroke()绘制直线
圆及闭合图形
ctx.beginPath(),绘制开始
ctx.arc(x轴，y轴，半径，开始角度，终点角度,true为顺时针false为逆时针)（100，100，50，0，Math.PI2(360),true）
ctx.closePath();绘制结束
添加样式ctx.fill()
三角形
ctx.beginPath()
ctx.moveTo(25,25)起点夺标
ctx.lineTo(150,25)目标点坐标
ctx.lineTo(25,250)目标点坐标
ctx.stroke()绘制直线
直线样式，ctx.strokeStyle = “”
绘制贝塞尔曲线
绘制贝塞尔曲线
ctx.lineWidth = 6 设置线宽度
ctx.beginPath()
ctx.moveTo(0,0)起点坐标
二次贝塞尔曲线
ctx.quadraticCurveTo(75,50,300,200)节点坐标，锚点坐标
三次
ctx.bezierCurveT0(205,56,239,439,429,236) 两个节点坐标，一个锚点坐标
ctx.stroke(),绘制线条
起点和锚点是固定的，通过节点可以控制曲线的弧度和形状
1、 给一个变量的属性赋值，是无法访问的。
2、 unde null 0 “”NaN 这五个值为false
3、 submit 自动补全命令 html:5 ,html:4t，控件名称点击tab键
ul.类名#id数量>li.类名#id数量>a，然后点击tab，
标签前半部分，点击tab。
8.scoped锁区样式作用到子组件内部
如果没有scoped 锁区 /deep/获取 >>>.子组件类名
/deep/(>>>) .weui-toast__content{
font-size: 0.5rem !important;
height: 1rem !important;
line-height: 1rem !important;
}
如果有scoped锁区且/deep/，>>>失效,则使用#{‘/deep/’}或者 #{‘>>>’}
#{’/deep(>>>)/’} .weui-toast__content{
font-size: 0.5rem !important;
height: 1rem !important;
line-height: 1rem !important;