1.一图看区别

2. Canvas绘制过程

Canvas不是html绘制的过程，只能通过js去控制样式的绘制，并且知识标量绘制

-绘制流程

• 获取画布的Id (准备写字的纸)
• getContext('2d') (准备绘图的笔)

绘图的方法

//绘制方型
fillRect(x,y,width,height) //绘制实心 fill 实心  stroke空心  clearRect 清除绘制
//绘制圆
arc(x,y,半径,起始角度，终止角度，false(true为逆时针))
ctx.stoke() //描边
//绘制线
moveTo(x,y) //移动到
lineTo(x,y) //绘制到
//移动坐标系原点
ctx.translate(x,y)
//新起路径
ctx.beginPath()
//坐标系旋转
ctx.save() // 保存原来坐标系 
ctx.rotate(弧度) 
ctx.restore() //恢复原来坐标系
//绘制文字
ctx.font="" //文字样式
ctx.textBaseline="middle" //竖直方向对齐
ctx.textAlign="" //水平方向对其
ctx.fillText(“文字内容”，x，y)

3.SVG绘制

SvG为矢量绘制，canvans内部无法使用css描述，svg可以这样用，SVG使用标签进行绘制

svg包裹： 
绘制线 line标签 
折线：polyline标签 
矩形：rect 
圆：circle
可进行分组：类似于div包裹一个大元素，分组子元素会继承group的属性
文字：text
translate移动

SVG框架：echarts、D3
let option=['1','2','3']
d3.select(body).selectAll(“p”).data(option).enter().append('p').attr()
//d3 updata更新 enter新增 exit减少
//比例尺：
xScale=d3.scale.linear().domain([0,250]).ranger([0,600-margin.left-margin.right])
//domain纵坐标方向最大最小值
//ranger 横坐标方向最大最小值