[TOC]

语义化标签：直观展示，其实都是div标签

头部
底部 导航条
一个文章（可以被引用拿走）
通常挡在acticle里面不是完整的，语义化标签只是用来区分的。
侧边栏正文旁边的部分；不常用；在管理系统中可以用；这些标签只是名字不一样；都是div；写大篇的代码，需要用语义化标签；先分区域，在局部分析；
canvas标签：用的不是很多，就是用来做做动画啥的。画板；需要用js进行操作；
获取画笔—canvas的dom.getContext（’2d’）
画线—moveTo(200,200); lineTo(499 ,399); dom.stroke();dom.closePath()闭合线；dom.fill()填充；dom.lineWidth()加粗无论写在哪里，都相当于在最开始设置了moveTo；dom.beiginWidth()重新开启一个路径等于重新开始一个moveTo()，这时候设置相应的加粗是可以的。 这时候dom.closePath()是不可以的，因为没有在同一路径下。
画矩形：dom.rect(100,100位置, 宽200, 高100);只是构建路径；dom.stroke()； ;dom.strokeRect(100,100,200,100);直接画出矩形dom.fillRect(100,100,200,100)；直接画出填充矩形；dom.clearRect(0，0 ，500,300)；就是所谓的橡皮擦；可以做自由落体
画圆：确定一个圆 ( 圆心（x，y），半径r，弧度（起始弧度，结束弧度），方向（顺时针 | 逆时针），提到弧度是以PI (180度)就是一个半圆）dom.arc(100,100, 50, 0, math.pi / 2)；
画圆角矩形：四条边，四个圆角;；相当于border-radius属性；dom.moveTo(100,100) dom.arcTo(100,200,[起点]150,200,[终点]10)；……这时候坐上角多出来了一块，这是因为，你一旦加上了圆角你就比它矮了；所以就是把圆角的位置让出来就可以了，用dom.moveTo(x,y);
画贝塞尔曲线：有两条线段构成的就叫做二次贝塞尔曲线；有三条线段就是三次贝塞尔曲线；用的比较少；数学功力；最好加上dom,befinPath(); dom.moveTo(100,100); dom.quadraticCurveTo(p1点：200,200向上还是向下, p2点300,100)；三次贝塞尔曲线：dom.bezieCuveTo(p1点，p2点，p3点)；用的不多；
坐标平移旋转和缩放：dom.rotate(角度math.pi / 2)旋转; 根据画布的原点进行旋转；dom.translate(100, 100)这样的话就改变了坐标系的位置;dom.storekeRect(100,100,200,200)画矩形;dom.scale(1, 2)x轴和y轴的收缩与扩张；
canvas的save 和 restore：当我们画了一个矩形设置了平移和旋转属性之后，然后我们在画一个矩形，就会继承上一个设置的长度和变化；坐标系平移和旋转是全局的，不是局部的；在我们变化之前调用dom.save ( )保存平移数据，缩放数据，旋转数据;我们保存一下最原始的状态；然后我们在新的路径中调用dom.restore();然后我们在下面缩放平移啥的都不影响了；
canvas的背景填充：dom. (100,100,200,100);dom.fillStyle = ‘颜色值’;我们构建了img标签以及加上了src属性值；var bg = dom.createPattern(img, ‘no-repeat’)；dom.fillRect(bg);这时候颜色并没有设置上img是异步加载的，有时候还没有加载完就执行下面的加载了来我们用img.load = { dom.beginPath(); var bg = dom.createPattern(img, ‘’repeat); dom.fillStyle = bg; dom,fillRect(100, 100, 200, 100)}；但是这时候图片并没有显示，它是以坐标系原点进行填充的；所以想要修改就要改变坐标系的位置；纹理的填充是根据原点进行填充的；
canvas线性渐变：dom,fillStyle = bg; var bg = dom.createLinearGradient( 0, 0, 200, 0方向); bg.addColorStop(0, ‘color值’)；bg( 1，’color值’); 这样就可以完成一个填充；0-1之间；线性渐变的起点还是原点，不是图形的原点；
canvas的辐射渐变：var bg = dom.createRadialGradient(x1, y1, r1, x2, y2, r2);这两个点到底有什么关系？起始圆的里面的颜色开始的颜色，起始圆的渐变的边向结束圆的边进行渐变；
canvas的阴影：dom.shadowColor = blue; 阴影颜色 dom.shadowBlur = 20; 扩散距离 dom.stroRect(0, 0, 200, 200);这时候阴影是骑在线上的，dom.shadowoffsetX = 15;这样就不会骑着了；
canvas渲染文字：dom.stroText(‘文字’，200,100);文字描边；dom.fillText(‘文字1’, 200 ，200)文字填充；dom.fillStyle = ‘red’;可以填充文字1；dom.font = ‘10px Geofla’;都会被作用上字体大小
canvas线端样式：dom.lineCap = ‘butt’默认样子原来样子 || ‘square’前后添加小方块 || ‘round’ 前后都是添加圆 ; dom.llineJoin = ‘round’ 变圆了 || ‘bevel’ 砍了那块线段交接之处; || ‘miter’ 默认; dom.miterLimit = 5就会截断了就等于bevel；
svg画线和矩形：svg矢量图，放大不会失真，适合大面积的贴图，动画较少，或者比较简单；canvas通常适合用于小面积绘图，适合动画，canvas通过js去画的，svg是通过标签和css去绘画的；
style{
line{
stroke: black; 显示颜色
stroke-width: 5px; } 显示加粗
storke-dasharray: 10px 20px 30px;就是分成了个小方块;虚线 切割
storke-dashoffset: 10px;向左边变成白的了; 就是往左边偏移 弹慢又清空
}
polyline{
fill:transparent;不填充 没有颜色
stroke:bluesky;显示边框颜色
stroke-width:3px；显示加粗效果
stroke-opacity：0.5；线透明度
fill-opacity：.0.5;填充半透明
stroke-linecap: round; 尾部样式添加小圆；square添加矩形
stroke-linejoin: miter;默认；bevel；砍掉 两线相交 和canvas一样
}
text{
stroke: blue;
stroke-width: 3px;
}
path{
stroke：black；
}


过去长度为500px，现在就当成长度为250px;；比如目标元素的x/500 ，设置viewBox之后就相当于x/250px 等于放大了，所以说改变了viewbox，就可以进行设置地图；绑定事件进行修改
线
矩形

圆
椭圆
折线

多边形，首尾相连如果不填充，和ployline没有什么区别
等会文本

做基本的画线 大写叫做绝对位置；小写叫做相对位置；moveTo lineTo H:水平方向 V：垂直方向 可以连续的运动；
圆弧指令 有两个点 在一个平面里有俩椭圆；

既然使我们自己定义的标签，等到我们想要画矩形的时候可以引用这个id就可以使用；




数字越大越模糊

想要引入的时候必须要写在defs上面

就可以使用这个渐变颜色

svg画圆、椭圆、折线
svg画多边形和文本
svg透明度与线条样式
svg的Path标签
svg的Path画弧
svg线性渐变
svg高斯模糊
svg虚线以及简单东湖asvg的viewbox（比例尺）

audio与video播放器:控制条可以自己做
style{
video{
width:100px;
height:100px;
}

}


封装video播放条：
style{。。。可以设置控制条
*{
padding:0;
margin:0;
}

.meun{
}
.play{
}
.time{
}
.prograss_bar{
}
.spread{
}
.quck-list{
}
.voice-add{
}
.voice-dre{
}
.fillScreen{
}
}




bobo
播放按钮;可以进行设置
time
时间进度

条条
小点点
进度条
倍速



  • 正常

  • 1.25

  • 1.5

  • 2



音量+

音量-




视频播放器的开始与暂停
视频播放器的时间进度
视频播放器的进度条
视频播放器的调节倍速
视频播放器的音量调节
视频播放器全屏