语义化标签

header：头部标签，一般可做头部导航
footer：尾部标签
nav：导航条标签
article：文章标签。可以直接被引用拿走的部分
section：段落标签
aside：侧边栏标签

canvas 画板

——使用js操作绘画
——使用canvas.getContext，获取内容区(类似画笔)
——画布大小：在行间样式设置宽高
——beginPath()：初始化
1 画线：
——有起点和终点，
——起点：moveTo(x,y)；终点：lineTo(x,y)
——渲染到页面：stroke()
——closePath()：连续的线可以直接闭合
——fill()：填充，变成实心的图形
——lineWidth=：设置线的粗细
2 画矩形
——rect(起始坐标，长，高)：需要stroke
——strokeRectt(起始坐标，长，高)：不需要渲染，直接画出
——fillRect(起始坐标，长，高)：直接绘制填充的矩形
3 画圆/弧
——需要条件：圆心(x,y)，半径，弧度(起始弧度，结束弧度)，方向(顺时针 0，逆时针 1)，Math.PI = 180度
——arc()：里面依次传参
4 画圆角矩形
——moveTo(起始坐标)，arcTo(B点坐标，C点坐标，圆角大小)
——C点只是提供方向，没有具体线段
5 画贝塞尔曲线
——贝塞尔曲线：分为二次，三次，四次等等
——使用quadrationCurveTo画二次曲线
——使用bezierCurveTo画三次
6 变换
——translate()：坐标系平移
——rotate()：坐标系旋转
——scale()：缩放
——save()：存储当前的坐标平移旋转等变换
——restore()：恢复存储的坐标
7 样式
——fillStyle=：可以填充背景颜色和样式
——createPattern()：放入图片，结合fillStyle填充背景图片
——填充图案根据坐标系原点为开始的
——createLinearGradient()：线性渐变；参数为开始位置，结束位置
——addColorStop()：可以设置颜色渐变，参数为位置，颜色
——createRadialGradient()：辐射渐变，参数为开始坐标，半径，结束坐标，半径
——shadowColor=：设置阴影颜色；shadowBlur=：设置阴影大小
——lineCap=：设置线段样式
——lineJoin=：设置两个线段焦点形式