canvas经常出现在图表，游戏以及一些活动页面中。
通过js我们就可以在canvas绘制图形。
首先，先添加canvas元素到HTML页面。
<canvas id="first" width="500" height="500"></canvas>
这样就可以使用js开始绘图了。
先获取canvas提供的绘图对象
const context = first.getContext('2d');
通过rect绘制矩形，rect(x, y, w, h)参数分别对应左上角x,y坐标，宽度，高度
beginPath和closePath是用来设置绘制点的开始和结束
fillStyle设置的是填充颜色，fill则代表将颜色填充到图形里面。
context.beginPath()
context.rect(10,10, 100, 200);
context.fillStyle = 'aqua';
context.fill();
context.closePath();
这样就得到了矩形
接着，通过arc()来绘制弧 arc(x, y, r, startAngle, endAngle, anticlockwise )标识x,y圆心坐标，r半径，startAngle则是开始角度，endAngle则是结束角度，anticlockwise是否是逆时针方向，默认否。
strokeStyle设置的是弧的描边颜色，lineWidth则设置的是描边大小。stroke则是使用设置的颜色进行描边
context.beginPath()
context.arc(250,250,120,Math.PI*0,Math.PI*1.9);
context.strokeStyle = 'green';
context.lineWidth = '19'
context.stroke()
context.closePath();
然后就得到弧了
此外，画圆也是通过arc这个方法。设置角度从0到360，然后填充即可得到圆形了
context.beginPath();
context.arc(300,300, 30,0,Math.PI*2);
context.fillStyle="#FF0000";
context.fill();
context.closePath()
