您的位置: 主页>机器人编程>Javascript编程>《javascript-少儿编程》第13章canvas元素之用一个函
加盟酷吧机器人 培养孩子核心能力

《javascript-少儿编程》第13章canvas元素之用一个函

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

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

欧美思机器人教育加盟 赚钱好项目
上一篇:《javascript-少儿编程》第13章canvas元素之本章小结
下一篇:《javascript-少儿编程》第13章canvas元素之绘制整圆
您可能喜欢
回到顶部