1.默认为300*300，不建议用css设置宽高 html中：
<canvas id="canvasRef" width="300" height="300"></canvas>
vue中：
<canvas idref="canvasRef" width="300" height="300"></canvas>
2.获取canvs上下文：
var canvas = document.getElementById('canvasRef');
vue中就
ref= canvasRef
const canvasDom = this.\$refs.canvasRef;
一，绘制矩形：
- xxx.fillRect(x, y, width, height)：绘制一个填充的矩形。
- xxx.strokeRect(x, y, width, height)：绘制一个矩形的边框。
- xxx.clearRect(x, y, widh, height)：清除指定的矩形区域，然后这块区域会变的完全透明。
二，绘制路径 (path)：
- 图形的基本元素是路径。
- 路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。
- 一个路径，甚至一个子路径，都是闭合的。
- 使用路径绘制图形需要一些额外的步骤：
- 创建路径起始点
- 调用绘制方法去绘制出路径
- 把路径封闭
- 一旦路径生成，通过描边或填充路径区域来渲染图形。
三，绘制圆弧：
1、arc(x, y, r, startAngle, endAngle, anticlockwise):
以(x, y) 为圆心，以r 为半径，从 startAngle 弧度开始到endAngle弧度结束。anticlosewise 是布尔值，true 表示逆时针，false 表示顺时针(默认是顺时针)。 注意： 这里的度数都是弧度。 0 弧度是指的 x 轴正方向。
四，绘制贝塞尔曲线（太难不会）
五，添加样式和颜色： 颜色
- xxx.fillStyle = color 设置图形的填充颜色
- xxx.strokeStyle = color 设置图形轮廓的颜色 样式：
- line style线宽：xxx.lineWidth = xxx （默认1.0，）
- lineCap线条末端样式['butt', 'round', 'square'] xxx.lineCap = lineCaps[i];
- butt：线段末端以方形结束
- round：线段末端以圆形结束
- square：线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。
六，状态的保存和恢复： save()，restore() save()类似数组的push（） restore()类似数组的pop（）
操作基本： 下面是需要用到的方法：
-
beginPath() 新建一条路径，路径一旦创建成功，图形绘制命令被指向到路径上生成路径
-
moveTo(x, y) 把画笔移动到指定的坐标(x, y)。相当于设置路径的起始点坐标。
-
closePath() 闭合路径之后，图形绘制命令又重新指向到上下文中
-
stroke() 通过线条来绘制图形轮廓
-
fill() 通过填充路径的内容区域生成实心的图形
实际方法使用：
- 创建路线xxx.beginPath();
- 画笔初始点位置xxx.moveTo(x,y)
- 画笔终点位置xxx.lineTo(x,y)
- 初始点和终点位置连起来xxx.closePath()
- 绘制图形的轮廓xxx.stroke()，但是不会用到4的闭合，需要再下文加4.
- 选择性填充闭合区域xxx.fill()，默认黑色，改变颜色在前方加入xxx.fillStyle='red',改变填充颜色
