如果只想要绘制圆，arc方法有一点复杂。对于圆圈，我们总是想要让arc从0开始并且在πX2结束，并且方向（顺时针还是逆时针）无关紧要。此外，要真的绘制圆，在调用arc方法之前和之后，你总是需要调用ctx.beginPath和ctx.stroke方法。我们可以编写一个函数来绘制圆，从而忽略这些细节，所必需提供的只有x、y和radius参数。现在让我们开始做吧。
和arc方法一样，在这个函数中，我们必须做的第一件事情是调用ctx.beginPath以告诉画布要绘制一个路径。然后，调用ctx.arc，传入x、y和radius变量作为函数的参数。和前面一样，我们使用0作为起始角度，使用Math.PI*2作为结束角度，使用false来顺时针地绘制圆。
有了这个函数，我们可以直接通过填入圆心坐标和半径（作为参数）来绘制很多的圆。例如，下面这段代码绘制了一些彩色的同心圆。
你可以在图13-14中看到这些圆的样子。首先，我们将线条的宽度设置为4个像素。然后，将strokeStyle设置为”Red”，并且使用circle函数在坐标（100，100）绘制一个圆，其半径为10像素。这是一个红色的中心圆。
图13-14 彩色的同心圆，使用circle函数绘制
然后我们使用相同的技术在同样的位置绘制一个半径为20像素的橙色的圆；然后，再次在同样的位置绘制一个半径为30像素的黄色的圆。最后3个圆也位于同样的位置，但是，分别增大了半径并且颜色分别是绿色、蓝色和紫色。
试试看
如何修改circle函数，从而使用其填充圆而不只是绘制圆圈？添加第4个参数，这是一个Boolean值，它说明圆是应该填充还是只是圆圈。传入true表示想要填充的圆。可以将该参数命名为fillCircle。
使用修改后的函数，绘制这个雪人，组合使用圆圈和填充的圆
本站内容未经许可，禁止任何网站及个人进行转载。
