web前端开发工程师如何使用canvas绘制圆形？

　　随着互联网的普及和技术的不断发展，web前端开发工程师在当今互联网行业中的重要地位，Web前端开发工程师作为一个专业技术岗位，需要掌握多种技术来构建现代化的网页和应用程序，今天八维职业学校和大家一起来看看web前端开发工程师如何使用canvas绘制圆形？希望对想要学习和了解web前端开发工程师这个行业的同学有所帮助。

　　Canvas是HTML5中新增的元素，专门用来绘制图形，相当于在页面中放了一张"画布"，可以在里面绘制图形，但是不是指用鼠标画图，而是需要用Javascript编写需要绘制的图形的脚本。

　　一、 开始创建路径

　　使用beginPath方法开始创建路径。beginPath() 方法表示开始一条路径，或重置当前的路径。简单来说，其实就是告诉画布，我要开始画草稿了，请把之前的草稿都清除掉。

　　这个方法不设置参数，通过调用这个方法开始创建路径，在案例中我们需要循环绘制圆形，在循环的几次创建路径的过程中，每次开始创建是都要调用beginPath()。

　　语法是：

　　context. beginPath ();

　　二、 创建圆形路径

　　创建圆形路径的时候，需要使用图形上下文对象的arc()方法，这个方法的定义是：

　　arc() 方法创建弧/曲线(用于创建圆或部分圆)。

　　这个方法的语法是：

　　这个方法使用6个参数，

　　x为圆的中心的 x 坐标;

　　y为圆的中心的 y 坐标;

　　r为圆的半径;sAngle为起始角，以弧度计(弧的圆形的三点钟位置是 0 度);

　　eAngle为结束角，以弧度计;

　　counterclockwise为规定应该逆时针还是顺时针绘图(False = 顺时针，true = 逆时针)。

　　arc()方法不仅可以绘制圆形，还可以绘制圆弧形，因此，必须指定起始角和结束角

　　三、 关闭路径

　　路径创建完毕后，使用图形上下文对象的closePath()方法关闭路径。

　　closePath() 方法创建从当前点到开始点的路径。

　　语法：

　　context.closePath();

　　关闭路径后，路径的创建工作就完成了。但是需要注意的是，这个时候只是路径创建完毕而已，还没有真正绘制任何图形。我们接着来学习如何设置绘制样式和填充当前路径。