类似于直线绘制中的，绘制多个图形一样，如果需要绘制多个弧线，应该使用beginPath()方法来开始一个新的路径，但如果每次都调用closePath()则会使弧线变成封闭的图形，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var canvas = document.querySelector("#c1");
canvas.width = 900;
canvas.height = 500;
var context = canvas.getContext("2d");
context.strokeStyle = "cornflowerblue";
context.lineWidth = 3;
for (var i = 0; i < 10; i++) {
context.beginPath();
context.arc(20 + i * 90 ,200,40,0,(i+1)*36 /180*Math.PI);
context.closePath();
context.stroke();
}
};
</script>
</head>
<body>
<canvas id="c1" style="border:1px solid gray;"></canvas>
</body>
</html>
效果如下：
我们只需要将代码中的context.closePath();去掉即可，如果调用closePath()，会将绘制点和起始点自动相连，所以会变成封闭区域。
去掉后浏览效果如下：
如果我们再添加如下代码：
context.fillStyle = "cornflowerblue";
for (var i = 0; i < 10; i++) {
context.beginPath();
context.arc(20 + i * 90 ,300,40,0,(i+1)*36 /180*Math.PI);
context.closePath();
context.fill();
}
for (var i = 0; i < 10; i++) {
context.beginPath();
context.arc(20 + i * 90 ,400,40,0,(i+1)*36 /180*Math.PI);
context.fill();
}执行效果相同，context.closePath()将不起作用。
如下：
