1、canvas 最早是有苹果公司推出的
2、canvas 本身没有绘画能力，所有的绘画都是通过js脚本来实现的。
3、canvas 默认宽高的300 * 150
4、canvas 可以绘制线条、矩形、圆形、文字等等；
5、canvas 不能通过行内样式来修改宽高，它有自己宽高的属性。
(0,0) 在画布的左上角
6、获取上下文
var ctx = myCanvas.getContext('2d'); //获取上下文
7、
//开启路径
ctx.beginPath();
//设置起始点的坐标
ctx.moveTo(x,y);//除了第一个点的点的坐标
ctx.lineTo(x,y);
//描边
ctx.stroke();
//改变线的颜色
ctx.strokeStyle = color;
//改变线宽度
ctx.lineWidth = 宽度;
//设置线两端的样式
ctx.lineCap = 'butt(默认的) round square';
//填充ctx.fill();
//改变填充颜色
ctx.fillStyle = color;
//矩形
ctx.rect(x,y,w,h); x,y矩形左上角的坐标 w,h 是矩形的宽度和高度
这个方法需要配合着fill()/stroke()一起使用
ctx.fillRect(x,y,w,h); //填充矩形 == ctx.rect() + ctx.fill()
ctx.strokeRect(x,y,w,h); //描边矩形 == ctx.rect() + ctx.stroke()
//清除矩形
ctx.clearRect(x,y,w,h); //清除矩形
//画圆ctx.arc(x,y,r,Angs,Ange,counterclockwise);
x,y 是圆心点的坐标
r 是圆的半径
Angs 是圆的起始角度 以弧度计
Ange 是圆的结束角度 以弧度计
counterclockwise //顺时针还是逆时针 true是逆时针
角度转弧度的公式 角度 * Math.PI / 180;
//文本
ctx.fillText(text,x,y,maxWidth); 填充文本 //text:要放的文本 x\y 要
放文本的坐标 maxWidth 是文本的最大宽度
ctx.strokeText(text,x,y,maxWidth); 描边文本 //text:要放的文本 x\y
要放文本的坐标 maxWidth 是文本的最大宽度
//文本样式ctx.font = '24px normal'; //文本大小 字体样式（微软雅黑）
ctx.textAlign = 'center' //right\end left\start center
ctx.textBaseline = 'middle'
//ctx.translate(x,y); 重新映射画布(0,0)的位置
//旋转
ctx.rotate(ang); //以弧度为单位
ctx.save() //保存当前的环境的状态
ctx.restore(); //释放之前保存的状态
//关闭路径
ctx.closePath();toDataURL() //canvas上边的方法 base64格式的一个路径
//阴影
ctx.shadowColor = '颜色' //阴影的颜色
ctx.shadowBlur = 'number' //阴影的模糊级别
ctx.shadowOffsetX = 'number' //阴影的水平方向的距离 正值在右侧，
负值在左侧
ctx.shadowOffsetY = 'number' //阴影的垂直方向的距离 正值在下方，
负值在上方
//渐变
var grd = ctx.createLinearGradient(x1,y1,x2,y2) //线性渐变,从
x1,y1的位置开始渐变，到x2,y2的位置结束渐变
var grd = ctx.createRadialGradient(x1,y1,r1,x2,y2,r2);
//x1,y1开始渐变的圆的坐标，r1是开始渐变圆的半径，x2,y2是结束渐变的圆
的坐标，r2是结束渐变圆的半径//添加颜色
grd.addColorStop(0,color); //第一个参数是0-1之间的值 第二个参数是
渐变的颜色
grd.addColorStop(0.3,color);
grd.addColorStop(1,color);
