绘制圆

前面我们学习绘制的路径都是以直线为主，比如线段、折线或者是绘制的矩形，它们都是由直线组成的。今天开始，我们学习曲线的绘制。本小节就先从如何画圆开始。

绘制圆在 canvas 中是常用的，在 canvas API 中直接提供了封装好的绘制圆的 arc()。这个接收 5 个必填参数x，y，r，sAngle，eAngle，还有 Boolean 类型的可选参数 counterclockwise，用于规定是从顺时针还是逆时针开始绘制路径。

先看整体案例：

<!DOCTYPE html>
<html>
<head>
	< charset="utf-8">
	<title>网Wiki</title>
    <style>
        #imooc{
            border:px solid #ccc;
        }
    </style>
</head>
<body>
	
	<canvas id="imooc">您的浏览器 HTML5 canvas </canvas>
	
	<script>
		const canvas = document.getElementById('imooc');
		canvas.width=
		canvas.height=
		const ctx = canvas.getContext('2d');
		ctx.Style="#456795";
		ctx.lineWidth=;
		
		ctx.arc(, , , , *Math.PI);  //了直接绘制圆的
	
		ctx.();
	</script>
</body>
</html>

运行结果：

我们从案例中可以看到，绘制圆形路径只需要即可，arc 和我们之前学过的 rect 绘制矩形的类似，也是绘制了路径，我们后续对路径的描边或者填充依然是需要或者 fill 。

前面提到 arc 有 5 个必填参数和1个可选参数，我们详细地说明一下这几个参数的用途。

前三个参数：x，y，r 分别代表了圆心坐标 (x, y)和要绘制圆的半径，这个很好理解，我们着重讲一下后面三个参数。

我们先来看一张：

上图中，x，y，r 分别对应着圆的中心和半径，图里还有开始角和结束角，这就是第四个参数 sAngle 和第五个参数 sAngle 表示的。明白了 5 个必填参数的含义，我想同学们应该可以想到 act 不仅可以画整圆，也是可以画半圆的，我们只需要调整开始角和结束角的大小即可。

我们看案例：

<!DOCTYPE html>
<html>
<head>
	< charset="utf-8">
	<title>网Wiki</title>
    <style>
        #imooc{
            border:px solid #ccc;
        }
    </style>
</head>
<body>
	
	<canvas id="imooc">您的浏览器 HTML5 canvas </canvas>
	
	<script>
		const canvas = document.getElementById('imooc');
		canvas.width=
		canvas.height=
		const ctx = canvas.getContext('2d');
		ctx.Style="#456795";
		ctx.lineWidth=;
		
		ctx.arc(, , , , *Math.PI);  // 绘制半圆
	
		ctx.();
	</script>
</body>
</html>

执行结果：

我们可以看到从 0 到 π 的半圆已经绘制好了。我们注意到认绘制半圆是顺时针绘制的，如果我想让逆时针绘制应该怎么做呢？这时我们就用到了 arc 的第六个可选参数：counterclockwise。

我们还是用上案例来说明。

<!DOCTYPE html>
<html>
<head>
	< charset="utf-8">
	<title>网Wiki</title>
    <style>
        #imooc{
            border:px solid #ccc;
        }
    </style>
</head>
<body>
	
	<canvas id="imooc">您的浏览器 HTML5 canvas </canvas>
	
	<script>
		const canvas = document.getElementById('imooc');
		canvas.width=
		canvas.height=
		const ctx = canvas.getContext('2d');
		ctx.Style="#456795";
		ctx.lineWidth=;
		
		ctx.arc(, , , , *Math.PI, true);  // 绘制半圆,传递了第六个参数为 true
	
		ctx.();
	</script>
</body>
</html>

运行结果：

这样我们就让圆弧实现了逆时针绘制。

不知道同学们有没有注意到上面两个案例中半圆都是没有闭合的一条弧线，如果想要闭合也很简单，只需要我们之前学习过的 closePath() 即可。

案例：

<!DOCTYPE html>
<html>
<head>
	< charset="utf-8">
	<title>网Wiki</title>
    <style>
        #imooc{
            border:px solid #ccc;
        }
    </style>
</head>
<body>
	
	<canvas id="imooc">您的浏览器 HTML5 canvas </canvas>
	
	<script>
		const canvas = document.getElementById('imooc');
		canvas.width=
		canvas.height=
		const ctx = canvas.getContext('2d');
		ctx.Style="#456795";
		ctx.lineWidth=;
		
		ctx.arc(, , , , *Math.PI, false);  // 绘制半圆,传递了第六个参数为 true
		ctx.closePath()
		ctx.();
		
		ctx.beginPath();
		ctx.arc(, , , , *Math.PI, true);  // 绘制半圆,传递了第六个参数为 true
		ctx.closePath()
		ctx.();
		
	</script>
</body>
</html>

运行结果：

执行了 closePath() 就可以得到一条闭合的路径了。

本小节中我们使用到新的 arc()。

arc 作用是绘制起点在 (x, y)、半径为 r 的圆弧，圆弧由起始角和结束角控制。

变量说明：

本小节我们主要学习了利用 arc 绘制整圆和半圆形以及闭合圆弧。我们下一节将会讲另外一种绘制圆弧的。

←线条属性

绘制圆弧→

绘制圆

您的鼓励是对我最大的支持