如果只想要绘制圆，arc方法有一点复杂。对于圆圈，我们总是想要让arc从0开始并且在πX2结束，并且方向（顺时针还是逆时针）无关紧要。此外，要真的绘制圆，在调用arc方法之前和之后，你总是需要调用ctx.beginPath和ctx.stroke方法。我们可以编写一个函数来绘制圆，从而忽略这些细节，所必需提供的只有x、y和radius参数。现在让我们开始做吧。

var circle = function (x, y, radius) {
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2, false);
ctx.stroke();
};

　　和arc方法一样，在这个函数中，我们必须做的第一件事情是调用ctx.beginPath以告诉画布要绘制一个路径。然后，调用ctx.arc，传入x、y和radius变量作为函数的参数。和前面一样，我们使用0作为起始角度，使用Math.PI*2作为结束角度，使用false来顺时针地绘制圆。

　　有了这个函数，我们可以直接通过填入圆心坐标和半径（作为参数）来绘制很多的圆。例如，下面这段代码绘制了一些彩色的同心圆。

ctx.lineWidth = 4;
ctx.strokeStyle = "Red";
circle(100, 100, 10);
ctx.strokeStyle = "Orange";
circle(100, 100, 20);
ctx.strokeStyle = "Yellow";
circle(100, 100, 30);
ctx.strokeStyle = "Green";
circle(100, 100, 40);
ctx.strokeStyle = "Blue";
circle(100, 100, 50);
The canvas Element 213
ctx.strokeStyle = "Purple";
circle(100, 100, 60);

　　你可以在图13-14中看到这些圆的样子。首先，我们将线条的宽度设置为4个像素。然后，将strokeStyle设置为”Red”，并且使用circle函数在坐标（100，100）绘制一个圆，其半径为10像素。这是一个红色的中心圆。

《javascript-少儿编程》第13章canvas元素之用一个函数绘制多个圆

图13-14 彩色的同心圆，使用circle函数绘制

　　然后我们使用相同的技术在同样的位置绘制一个半径为20像素的橙色的圆；然后，再次在同样的位置绘制一个半径为30像素的黄色的圆。最后3个圆也位于同样的位置，但是，分别增大了半径并且颜色分别是绿色、蓝色和紫色。

　　试试看

　　如何修改circle函数，从而使用其填充圆而不只是绘制圆圈？添加第4个参数，这是一个Boolean值，它说明圆是应该填充还是只是圆圈。传入true表示想要填充的圆。可以将该参数命名为fillCircle。

《javascript-少儿编程》第13章canvas元素之用一个函数绘制多个圆

　　使用修改后的函数，绘制这个雪人，组合使用圆圈和填充的圆


本站内容未经许可，禁止任何网站及个人进行转载。