1、canvas：创建画布

<canvas id="canvas"></canvas>

2、画一条直线

var canvas=document.getElementById('cancas'）;
canvas.width=800;
canvas.height=800;
var context=canvas.getContext('2d');
//获得2d绘图上下文环境
//画一条直线
context.moveTo(100,100)
context.lineTo(700,700)//状态设置
context.lineWidth=10//指定线条宽度
context.strokeStyle="#fff"//线条颜色
context.stroke() //真正的绘制
//canvas不是基于对象的绘制，是基于状态的绘制环境

2、绘制图形
moveto折现起始的位置
lineto 顶点坐标
若想三根线不同颜色
若分别context.strokeStyle=“ ”
context.stroke(); 最后一次会把前面的覆盖掉

实现：
context.beginPath（）之后会用指定新的状态回值

context.lineWidth=10;
//context.beginPath（） 第一个可以省略
context.moveTo(100,100)开始一个新的坐标点
context.lineTo(700,700)从上个坐标点 画到这个坐标点
context.strokeStyle="red"
context.stroke()
context.beginPath（）开始一端全新的路径
context.moveTo(200,200)
context.lineTo(800,800)
context.strokeStyle="blie"
context.stroke()

绘制封闭图形 有空隙

解决方法：
把图形包在beginPath（）和closePath（）里面
最后一个lineto可以省略 ，会自动连接

颜色填充
context.fillStyle=“yellow”
context.fill();
context.strock();

绘制矩形

3、canvas自带api
context.rect(x,y,width,height);
fillRect()用fillstyle绘制填充矩形
strokeRect() 用 绘制矩形边框
4、后绘制的图形会遮挡前面的图形