# 绘制圆

## 2. 利用 arc 方法绘制圆

``````<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>慕课网Wiki</title>
<style>
#imooc{
border:1px solid #ccc;
}
</style>
<body>

<canvas id="imooc">您的浏览器不支持 HTML5 canvas 标签</canvas>

<script>
const canvas = document.getElementById('imooc');
canvas.width=300
canvas.height=300
const ctx = canvas.getContext('2d');
ctx.strokeStyle="#456795";
ctx.lineWidth=8;

ctx.arc(150, 150, 100, 0, 2*Math.PI);  //调用了直接绘制圆的函数

ctx.stroke();
</script>
</body>
</html>
``````

## 3. arc 方法参数

``````<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>慕课网Wiki</title>
<style>
#imooc{
border:1px solid #ccc;
}
</style>
<body>

<canvas id="imooc">您的浏览器不支持 HTML5 canvas 标签</canvas>

<script>
const canvas = document.getElementById('imooc');
canvas.width=300
canvas.height=300
const ctx = canvas.getContext('2d');
ctx.strokeStyle="#456795";
ctx.lineWidth=8;

ctx.arc(150, 150, 100, 0, 1*Math.PI);  // 绘制半圆

ctx.stroke();
</script>
</body>
</html>
``````

``````<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>慕课网Wiki</title>
<style>
#imooc{
border:1px solid #ccc;
}
</style>
<body>

<canvas id="imooc">您的浏览器不支持 HTML5 canvas 标签</canvas>

<script>
const canvas = document.getElementById('imooc');
canvas.width=300
canvas.height=300
const ctx = canvas.getContext('2d');
ctx.strokeStyle="#456795";
ctx.lineWidth=8;

ctx.arc(150, 150, 100, 0, 1*Math.PI, true);  // 绘制半圆,传递了第六个参数为 true

ctx.stroke();
</script>
</body>
</html>
``````

``````<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>慕课网Wiki</title>
<style>
#imooc{
border:1px solid #ccc;
}
</style>
<body>

<canvas id="imooc">您的浏览器不支持 HTML5 canvas 标签</canvas>

<script>
const canvas = document.getElementById('imooc');
canvas.width=600
canvas.height=300
const ctx = canvas.getContext('2d');
ctx.strokeStyle="#456795";
ctx.lineWidth=8;

ctx.arc(150, 150, 100, 0, 1*Math.PI, false);  // 绘制半圆,传递了第六个参数为 true
ctx.closePath()
ctx.stroke();

ctx.beginPath();
ctx.arc(450, 150, 100, 0, 1*Math.PI, true);  // 绘制半圆,传递了第六个参数为 true
ctx.closePath()
ctx.stroke();

</script>
</body>
</html>
``````

## 4. 方法整理

### 4.1 arc()方法

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

x Number 指定圆心位置的X坐标。
y Number 指定圆心位置的Y坐标。
r Number 圆的半径。
sAngle Number 起始角，以弧度计，（弧的圆形的三点钟位置是 0 度）。
eAngle Number 结束角，以弧度计。
counterclockwise Boolean 规定应该逆时针还是顺时针绘图，false = 顺时针，true = 逆时针。