如果只想要绘制圆,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元素之用一个函数绘制多个圆

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


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