14.3.2 绘制蜜蜂

  接下来,创建了drawBee函数来绘制蜜蜂。drawBee函数使用circle函数,在x和y参数所指定的坐标处绘制一只蜜蜂。它看上去如下所示:

《javascript-少儿编程》第14章在画布上让物体移动之绘制蜜蜂

  在代码的第一段中,在❶处,设置了lineWidth、strokeStyle和fillStyle属性以用于绘制。将lineWidth设置为2像素,将strokeStyle设置为Black。这意味着,用于表示蜜蜂的身体、翅膀和眼睛的圆,将会拥有一个较粗的黑色的外框。fillStyle设置为Gold,它将会使用金黄色来填充表示蜜蜂身体的圆。

  在代码的第二部分,在❷处,绘制了一系列的圆来组成蜜蜂。来看下这些代码。

  第一个圆以点(x,y)为圆心,半径为8像素,是一个填充的圆,它绘制出了蜜蜂的身体。

circle(x, y, 8, true);

  由于fillStyle设置为Gold,将会使用如下示的黄色来填充圆:

《javascript-少儿编程》第14章在画布上让物体移动之绘制蜜蜂

  第二个圆围绕着蜜蜂的身体绘制了一个黑色的边框,这和第一个圆具有同样的大小,且在同样的位置:

circle(x, y, 8, false);

  在叠加到第一个圆之上后,看上去如下所示:

《javascript-少儿编程》第14章在画布上让物体移动之绘制蜜蜂

  接下来,用圆来绘制蜜蜂的翅膀。第一个翅膀是一个圆,其圆心位于表示身体的圆的圆心左边5像素和上方11像素的位置,半径为5像素。第二个翅膀也一样,只不过其圆心位于表示身体的圆的圆心右侧5像素的位置。

circle(x - 5, y - 11, 5, false);
circle(x + 5, y - 11, 5, false);
  添加了这些圆之后,蜜蜂如下所示:

《javascript-少儿编程》第14章在画布上让物体移动之绘制蜜蜂

  最后来绘制眼睛。表示第一个眼睛的圆,位于表示身体的圆的圆心的左边2像素和上方1像素的位置,其半径为2像素。表示第二个眼睛的圆,也是相同的,只不过它在右边2像素的位置。

circle(x - 2, y - 1, 2, false);
circle(x + 2, y - 1, 2, false);
  综合起来,这些圆构成了一只蜜蜂,表示其身体的圆,圆心是传递给drawBee函数的(x,y)坐标。

《javascript-少儿编程》第14章在画布上让物体移动之绘制蜜蜂



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

   口袋儿题库-青少儿编程自测题库