HTML canvas arc()方法参数详解，画圆实例在线编辑
arc()方法
在HTML的canvas绘图中，arc()方法可以用于绘制曲线或创建弧，也可以创建圆或半圆，其调用的语法及参数结构如下：
arc()语法及参数
context.arc(x,y,r,sAngle,eAngle,counterclockwise)
提示：context是什么，可具体看下方绘制圆形的实例。
arc()方法各参数用途如下表：
| 参数 | 描述 |
|---|---|
| x | 定义所绘制的曲线或圆的中心的x轴坐标值 |
| y | 如上，定义的是中心的y轴坐标值 |
| r | 定义圆的半径大小 |
| sAngle | 定义起始角，以弧度计（弧的圆形的三点钟位置是 0 度） |
| eAngle | 定义结束角，以弧度计 |
| counterclockwise | 一个可选参数，定义顺、逆时针绘图的方式，False为顺时针，True为逆时针 |
canvas arc()方法绘制圆形实例代码，及在线编辑器
<canvas id='myCanvas' width='500' height='500'></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.arc(50,50,20,0,2*Math.PI,true);
context.closePath();
context.fillStyle='skyblue';
context.fill();
</script>
<!-- 提示：当需要修改上面的参数时，比如绘制半圆等，可以尝试关掉当前的编辑器，然后重新点击页面上的试一试按钮，然后修改，再运行 -->画圆实例代码解析
如上代码（注意当中的提示内容），绘制圆形的时候，起始角一般为0，结束角则一般为2*Math.PI（弧度表示）。