今天带大家学习用js绘画（canvas），首先呢先学习canvas的基础知识。
我们通常画画得需要一张纸或者一个画板，所以js画画也得需要一张画布
首先创建获取画布；
然后再获取2d
var ctx = canavs.getContext('2d');
- 开新路径
ctx.beginPath();
起始点
x是横坐标，y是纵坐标
ctx.moveTo(x, y);路径
x是横坐标，y是纵坐标
ctx.lineTo(x, y)闭合路径
ctx.closePath()描边与填充
ctx.stroke();
ctx.fill();设置描边和填充的颜色
ctx.strokeStyle = '颜色';
ctx.fillStyle = '颜色';清除画布
ctx.clearRect(x, y, width, height);
线的样式
线的宽度
ctx.lineWidth = 线的宽度线帽
ctx.lineCap = 'butt'//默认的
round: 半圆
square: 方形
圆
圆心:x, y是坐标
blur: 半径
start,end: 起始角度，结束角度
boolean: 是否为逆时针(true), 默认顺时针(false))
ctx.arc(x, y, blur, start, end, boolean)
保存状态
ctx.save(); // 保存当前的状态
ctx.restore(); // 返回上一级状态
- 填充矩形
x, y是坐标
宽高：width, height
ctx.fillRect(x, y, width, height);
- 绘制矩形路径
宽高：width, height
ctx.rect(x, y, width, height)
- 弧形
参考点1坐标: x1, y1
参考点2坐标: x2, y2
所切选圆的半径：r
ctx.arcTo(x1, y1, x2, y2, r);
- 填充字体
content: 字体内容
ctx.fillText(content, x, y)
- 描边字体
content: 字体内容
ctx.strokeText(content, x, y);
- 文本垂直居中
ctx.textBaseline = 'middle'; // top // bottom
- 文本水平居中
ctx.textAlign = 'center'; // left // right