h5 canvas，animation动画，前台数据库，scoped锁区及一些常识

1． 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’)
组件优化

1. 不常见标签u是下划线，s是删除线，sup是上标，sub是下标
2. ol li 标签是有序的 ul li 标签是无序的，dl dt dd 是自定义列表
3. pre预定义文本标签保留空格和换行符
4. 当需要显示html标签的时候对html标签进行转义
5. 缩写说明标签
6. cellspacing单元格间距cellpadding单元格内间距colspan是合并列，rowspan是合并行
7. 超链接跳转打开新窗口用的是target属性控制target=”_blank”
8. 页面之间的嵌套用iframe标签，target属性直还有_top顶层_parent上一级
9. 选择单选按钮点击文字起选中作用，为单选按钮添加id，将文字写入label标签 在label标签里写明for=”id”
10. header nav footer article 文章 评论section 章节 aside 与内容有关的推荐
    hgroup 标题组合 figure标签规定的独立流内容
11. datalist定义选项列表，文本框与下拉选项的结合，和输入框input 里list属性绑定datalist 的id
12. details定义文档细节menu普通列表及菜单
13. progress 进度条标签 属性value max最大值
14. mark高亮显示标签，time标签
15. H5新增表单元素 input type=email 自动验证邮箱格式type=url 验证输入值是否是一个有效的网址 type= tel 验证输入值是否是一个手机号 type =number 验证输入值是否是一个数字，还可以设置最小值min和最大值max以及每次增加减少的单位step type= range进度条 和number属性一样
    Type=color 颜色面板 type=date 输入日期 type=month 年月 type = week 周几
16. h5新增表单元素的属性 input type=file 上传文件 添加了新的属性multiple=”multiple”可以上传多个文件
17. input 输入框pattern 属性可以自定义输入格式用正则表达式验证，title属性也可以自定义错误提示 required 属性验证输入址不能为空
18. p标签设置属性contenteditable = true 标签内容可以编辑更改 设置hidden =hidden p标签就会隐藏
19. a标签的tabindex 可以设置按tab键时默认的选中顺序
20. cookie存储会向后台发出请求获取cookieid，占用带宽，大小有限制只能存储4kb
21. 往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 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;
    }