canvas的基本使用
canvas是一个标签，必须设置宽高，画布是canvas的属性
在绘制之前，先通过标签获取画布，通过画布调用绘制方法
获取画布：canvas.getContext("2d")
代码：
显示效果：
绘制直线的流程
1.开始绘制(落笔)
beginPath()
2.设置起点moveTo()
3.设置终点lineTo()
可以将最后一个终点和起点 相连接closePath()
4.根据设置的点，来连接stroke()
save()保存当前环境的状态
restore()返回之前保存的路径状态和属性
代码：
显示效果：
：创建线性渐变
属性值：1.x0,y0渐变开始点的x，y坐标
2.x1,y1渐变开始点的x，y坐标
2.createPattern(参数1,参数2)在指定的方向上重复指定的元素
属性值：参数1:image规定要使用的模式的图片、画布或视频元素
参数2:repeat默认。该模式在水平和垂直方向重复
repeat-x该模式只在水平方向重复
repeat-y该模式只在垂直方向重复
no-repeat该模式只显示一次（不重复）
3.createRadialGradient(x0,y0,r0,x1,y1,r1)：创建放射状/环形的渐变（用在画布内容上）
属性值：1.x0渐变的开始圆的 x 坐标
2.y0渐变的开始圆的 y 坐标
3.r0开始圆的半径
4.x1渐变的结束圆的 x 坐标
5.y1渐变的结束圆的 y 坐标
6.r1结束圆的半径
4.addColorStop(参数1，参数2):规定渐变对象中的颜色和停止位置
属性值：参数1.stop介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
参数2.color在 stop 位置显示的 CSS 颜色值。
线条样式
属性：
1.
lineCap设置或返回线条的结束端点样式
属性值：1.butt默认。向线条的每个末端添加平直的边缘
2.round向线条的每个末端添加圆形线帽
3.square向线条的每个末端添加正方形线帽
2.lineJoin设置或返回两条线相交时，所创建的拐角类型
属性值：1.bevel创建斜角
2.round创建圆角
3.miter默认。创建尖角
3.lineWidth设置或返回当前的线条宽度
属性值：number当前线条的宽度，以像素计
4.miterLimit设置或返回最大斜接长度
属性值：number正数。规定最大斜接长度
如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 “bevel” 类型来显示
矩形
方法：
1.
rect(x,y,width,height)创建矩形
参数值：1.x矩形左上角的 x 坐标
2.y矩形左上角的 y 坐标
3.width矩形的宽度，以像素计
4.height矩形的高度，以像素计
2.fillRect(x,y,width,height)绘制"被填充"的矩形
参数值：1.x矩形左上角的 x 坐标
2.y矩形左上角的 y 坐标
3.width矩形的宽度，以像素计
4.height矩形的高度，以像素计
3.strokeRect(x,y,width,height)绘制矩形（无填充）
参数值：1.x矩形左上角的 x 坐标
2.y矩形左上角的 y 坐标
3.width矩形的宽度，以像素计
4.height矩形的高度，以像素计
4.clearRect(x,y,width,height)在给定的矩形内清除指定的像素
参数值：1.x要清除的矩形左上角的 x 坐标。
2.y要清除的矩形左上角的 y 坐标。
3.width要清除的矩形的宽度，以像素计。
4.height要清除的矩形的高度，以像素计。
路径
1.
fill()填充当前绘图（路径）。
使用fillstyle来改变内填充颜色
如果路径未关闭，那么fill()方法会从路径结束点到开始点之间添加一条线，以关闭该路径（正如losePath()一样），然后填充该路径
2.stroke()绘制已定义的路径。
strokestyle来改变颜色
3.beginPath()起始一条路径，或重置当前路径
4.moveTo()把路径移动到画布中的指定点，不创建线条
5.closePath()创建从当前点回到起始点的路径
6.lineTo()添加一个新点，然后在画布中创建从该点到最后指定点的线条
7.clip()从原始画布剪切任意形状和尺寸的区域
8.quadraticCurveTo(cpx,cpy,x,y)创建二次贝塞尔曲线
参数值：1.cpx贝塞尔控制点的 x 坐标
2.cpy贝塞尔控制点的 y 坐标
3.x结束点的 x 坐标
4.y结束点的 y 坐标
9.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)创建三次贝塞尔曲线
参数值：1.cp1x第一个贝塞尔控制点的 x 坐标
2.cp1y第一个贝塞尔控制点的 y 坐标
3.cp2x第二个贝塞尔控制点的 x 坐标
4.cp2y第二个贝塞尔控制点的 y 坐标
5.x结束点的 x 坐标
6.y结束点的 y 坐标
10.arc(x,y,r,sAngle,eAngle,counterclockwise)创建弧/曲线（用于创建圆形或部分圆）
参数值：1.x圆的中心的 x 坐标
2.y圆的中心的 y 坐标
3.r圆的半径
4.sAngle起始角，以弧度计（弧的圆形的三点钟位置是 0 度）
5.eAngle结束角，以弧度计
6.counterclockwise可选。规定应该逆时针还是顺时针绘图。false = 顺时针，true = 逆时针。
11.arcTo(x1,y1,x2,y2,r)创建两切线之间的弧/曲线
参数值：1.x1两切线交点的横坐标
2.y1两切线交点的纵坐标
3.x2第二条切线上一点的横坐标
4.y2第二条切线上一点的纵坐标
5.r弧的半径
转换
1.
scale(width,height)缩放当前绘图至更大或更小
参数值：1.width缩放当前绘图的宽度（1=100%，0.5=50%，2=200%，依次类推）
2.height缩放当前绘图的高度（1=100%，0.5=50%，2=200%，依次类推）
2.rotate()旋转当前绘图
参数值：以弧度记，Math.PI/180为1°
3.translate(x,y)重新映射画布上的 (0,0) 位置
参数值：1.x添加到水平坐标（x）上的值
2.y添加到垂直坐标（y）上的值
4.transform(a,b,c,d,e,f)替换绘图的当前转换矩阵
参数值：1.a水平缩放绘图
2.b水平倾斜绘图
3.c垂直倾斜绘图
4.d垂直缩放绘图
5.e水平移动绘图
6.f垂直移动绘图
5.setTransform(a,b,c,d,e,f)将当前转换重置为单位矩阵。然后运行 transform()
参数值：1.a水平缩放绘图
2.b水平倾斜绘图
3.c垂直倾斜绘图
4.d垂直缩放绘图
5.e水平移动绘图
6.f垂直移动绘图
文本
属性：
1.
font设置或返回画布上文本内容的当前字体属性
代码：
显示效果：
2.textAlign设置或返回文本内容的当前对齐方式
属性值：start默认。文本在指定的位置开始。
end文本在指定的位置结束。
center文本的中心被放置在指定的位置。
left文本在指定的位置开始。
right文本在指定的位置结束。
3.textBaseline设置或返回在绘制文本时使用的当前文本基线
属性值：1.alphabetic默认。文本基线是普通的字母基线。
2.top文本基线是 em 方框的顶端。
3.hanging文本基线是悬挂基线。
4.middle文本基线是 em 方框的正中。
5.ideographic文本基线是表意基线。
6.bottom文本基线是 em 方框的底端。
方法：
1.
fillText(text,x,y,maxWidth)绘制被填充的文本
属性值：1.text规定在画布上输出的文本。
2.x开始绘制文本的 x 坐标位置（相对于画布）。
3.y开始绘制文本的 y 坐标位置（相对于画布）。
4.maxWidth可选。允许的最大文本宽度，以像素计。
2.strokeText(text,x,y,maxWidth)在画布上绘制文本（无填充）
属性值：1.text规定在画布上输出的文本。
2.x开始绘制文本的 x 坐标位置（相对于画布）。
3.y开始绘制文本的 y 坐标位置（相对于画布）。
4.maxWidth可选。允许的最大文本宽度，以像素计。
拖拽Drag
拖拽是指鼠标点击源对象后，不松手将其拖拽到目标对象，或半途松手(释放)的过程
源对象：指定鼠标点击的一个事物
目标对象：指的是我们拖动源对象后，预计要进入的区域
源对象触发的事件
1.
ondragstart源对象开始被拖动
2.ondrag被拖动过程中
drag事件最后一刻，无法读取鼠标坐标，x和y会变成0
添加if判断，直接结束，不赋值给元素
3.ondragend源对象被拖动结束
源对象进入目标对象触发
1.
ondragenter源对象进入目标对象时触发
2.ondragleave源对象被拖动着离开目标对象时触发
3.ondragover源对象悬停在目标对象上方时触发
4.ondrop源对象在目标对象上松手时触发
ondrop直接使用时，无法触发，需要在ondragover中阻止默认事件
代码：
draggable 标签自带属性，设置是否可以拖拽，默认为false不可以拖拽
数据传递对象
event.dataTransfer
功能：用于在源对象和目标对象之间传递数据
方法：setData(key,value)设置数据 value必须是字符串
getData(key)获取数据
JSON方法
JSON.stringify(对象) 将对象类型转换为字符串
JSON.parse(字符串) 将字符串类型转换为对象类型
本地储存
本地储存分为localStorange(永久存储)和sessionStorage(临时存储)
区别：
1.
localStorage这里做永久存储，浏览器关闭与否并不影响它
多数使用在用户自动登录，客户端保存数据方面
2.sessionStorage做临时存储，浏览器或页面关闭时，数据自动删除，不再存储
多用于安全性较高的网站
方法：
1.
setItem(key,value)保存数据
2.getItem(key)获取数据
3.removeItem(key)/clear()删除数据
CSS3选择器
兄弟选择器
1.
+紧邻选择器 相邻兄弟选择器
代码：
显示效果：
2.~间接兄弟选择器 所有下面的兄弟
代码：
显示效果：
属性选择器
1.
a[target]选择带有target属性的a标签
代码：
显示效果：
2.a[target=_blank]选择带有target=_blank的所有a标签
代码：
显示效果：
3.[title~=flower]选择title属性包含"flower"的元素
代码：
显示效果：
4.[lang|=en]选择lang属性以"en"开头的元素，均为自定义
代码：
显示效果：
链接伪类
1.
:link选择所有未被访问过的链接
2.:visited选择所有已被访问过的链接
3.:active选择所有活动链接
4.:hover选择鼠标指针位于其上的链接
元素状态伪类
1.
:enabled选择每个被启用的元素
2.:disabled选择每个未被启用的元素
3.:checked选择每个没选中的元素
4.:focus选择获得焦点的元素
结构伪类
单一类型：
1.
first-of-type匹配父元素下第一个子元素
2.last-of-type匹配父元素下最后一个子元素
3.nth-of-type(n) 匹配父元素下第n个子元素 4.nth-last-of-type(n)匹配父元素下倒数第n个子元素 5.only-of-type` 匹配属于其父元素的唯一子元素
多类型：
1.
first-child匹配父元素下第一个子元素
2.last-child匹配父元素下最后一个子元素
3.nth--child(n)匹配父元素下第n个子元素
4.nth-last-child(n)匹配父元素下倒数第几个子元素
5.only-child匹配属于其父元素的唯一子元素
伪元素选择器
1.
:first-letter选择冒号前元素的第一个单词
2.:first-line选择冒号前元素的第一行
3.::selection匹配元素中被用户选中的部分
内容生成器
1.
:before在···之前，配合content使用
2.:after在···之后，配合content使用
:lang(en)选择带有以"en"开头的lang属性值的每个元素 en为自定义
[class^=“xxx”]选择class属性值以xxx开头的所有元素
[class$="xxx"]选择class属性值以xxx结尾的所有元素
[class*="xxx"]选择class属性值包含"xxx"的所有元素
:root选择文档的根元素
:empty选择没有子元素的元素 包括文本节点
:target选择当前活动的元素
:not(n)非n元素外的所有元素
CSS2D效果
1.旋转 单位deg度
rotate() rotateX() rotateY() rotateZ()
代码：
显示效果：
2.位移：单位 px 像素
translate(参数1，参数2) translateX() translateY() translateZ()
代码：
显示效果：
3.缩放：正常比例为1，大于1放大，小于1缩小
scale(参数1，参数2) scaleX() scaleY()
代码：
显示效果：
4.倾斜 单位 deg 度
skew(参数1，参数2) skewX() skewY()
代码：
显示效果：
设置3D效果
transform-style:preserve-3d; 设置给父级
开启景深效果
perspective 属性 属性值单位为px
指定变形中心
transform-origin:top/center/bottom/left/right
自定义动画
也叫关键帧动画，分为制作动画和绑定动画
制作
@keyframes 声明自定义动画的关键词，后面需要写自定义动画的名称，空格间隔
代码：可多次使用
绑定
animation:动画名称,动画执行时间,动画执行的速度曲线,动画开始前的延迟,动画执行的次数,是否轮流反向播放
是一个简写属性，用于设置六个动画属性
属性：1.
animation-name:动画名称必填
2.animation-duration:动画执行所需的时间(必填)
3.animation-timing-function:动画执行的速度曲线,可选，默认值为ease
属性值：1.linear匀速
2.ease默认值。低速开始，然后加快，结束前变慢
3.ease-in低速开始
4.ease-out低速结束
5.ease-in-out低速开始低速结束
6.cubic-bezier(n,n,n,n)可能值是从0到1的数值
4.animation-delay:动画开始前的延迟，可选默认值为0s
5.animation-iteration-count:动画执行的次数,可选 默认值1 没有单位infinite无限次
6.animation-direction:规定是否轮流反向播放(注意：播放次数至少为2)可选
alternate反向播放normal默认 正常播放
7.animation-fill-mode:规定动画在播放之前或之后，其效果是否可见
属性值：1.none不改变默认行为
2.forwards动画完成后，保持最后一个属性值
3.backwards在animation-delay所指定的一段时间内，在动画显示之前，应用开
始属性值(在第一个关键帧中定义)
4.both向前和向后填充模式都被应用
8.animation-play-state规定动画执行或暂停
属性值：1.paused动画暂停
2.running 动画正在播放
盒模型
标准盒模型
box-sizing:content-box
代码：
显示效果：
怪异盒模型(不影响实际占地面积）
box-sizing:border-box
不会改变元素的占地面积，但是会改变内容的区域大小
代码：
显示效果：
弹性盒模型
display:flex开启弹性盒模型
根据主轴上的位置变化，对齐方式 justify-content
1.
flex-start开始位置，默认
代码：
显示效果：
2.flex-end结束位置
代码：
显示效果：
3.center中心位置
代码：
显示效果：
4.space-around两端对齐(元素到边框的距离是元素之间的一半)
代码：
显示效果：
5.space-between两端对齐(元素到边框之间无距离)
代码：
显示效果：
改变主轴的方向 flex-direction
1.
row从左到右，默认
2.row-reverse从右到左
代码：
显示效果：
3.colume从上到下
代码：
显示效果：
4.colume-reverse从下到上
代码：
显示效果：
交叉轴的对齐方式 align-items
1.
flex-start交叉轴的起点对齐
2.flex-end交叉轴的终点对齐
代码：
显示效果：
3.center交叉轴的中点对齐
代码：
显示效果：
4.baseline项目的第一行文字的基线对齐
代码：
显示效果：
5.stretch如果项目未设置高度或为auto,将占满整个容器的高度
换行 flex-wrap
开启换行，弹性盒模型下，默认为不换行
1.nowrap不换行
代码：
显示效果：
2.wrap换行
代码：
显示效果：
3.wrap-reverse倒序换行
代码：
显示效果：
align-content
功能与
align-items类似，该属性对单行元素无效，可以去掉多余的行间距
元素缩放
flex-shrinkflex的收缩默认是按等比
元素排序
order:number;需要将当前层级的每一个元素都排序
盒子阴影 box-shadow
1.水平位置偏移(必填) 单位px
2.垂直位置偏移(必填) 单位px
3.模糊度(可选) 单位px
4.阴影面积(可选)单位px
5.阴影颜色
6.内外阴影，默认为外阴影，inset外阴影
代码：
显示效果：
扫一扫
1122
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
