1
00:00:01,383 --> 00:00:03,649
现在我们谈谈你这期间

2
00:00:03,649 --> 00:00:05,685
一直在用的 函数

3
00:00:05,685 --> 00:00:09,140
当你使用 rect() fill() text() 这些命令时

4
00:00:09,140 --> 00:00:12,376
你其实是在调用函数 这些函数就会实现

5
00:00:12,376 --> 00:00:15,132
你所叫它们做的事情

6
00:00:15,132 --> 00:00:16,806
函数究竟是什么

7
00:00:16,806 --> 00:00:19,483
我们把一堆代码凑到一起

8
00:00:19,483 --> 00:00:21,240
并给它取个名字 好让我们能

9
00:00:21,240 --> 00:00:23,168
多次使用它的功能

10
00:00:23,368 --> 00:00:25,981
比如rect() 它是用来干什么的

11
00:00:25,981 --> 00:00:28,551
它就是用来画四条线的 是吧

12
00:00:28,551 --> 00:00:31,141
而我们也可以只用line()这个函数 是吧

13
00:00:31,141 --> 00:00:33,847
这样我们就得到了一个长方形样的东西

14
00:00:33,847 --> 00:00:36,751
但当我们想要

15
00:00:36,751 --> 00:00:39,322
画很多个长方形的时候

16
00:00:39,322 --> 00:00:40,773
那么每次都进行这些计算

17
00:00:40,773 --> 00:00:42,784
就相当地烦人了 还要费劲地思考

18
00:00:42,784 --> 00:00:44,282
这个角的这条线要怎么画

19
00:00:44,282 --> 00:00:45,818
那个角的要怎么画...

20
00:00:45,818 --> 00:00:48,538
所以不如用个rect()函数

21
00:00:48,538 --> 00:00:50,858
这个函数的效果跟之前

22
00:00:50,858 --> 00:00:55,148
那四行代码的效果一样 却又更加简洁

23
00:00:55,148 --> 00:00:58,399
这样还挺棒的 rect()这个函数

24
00:00:58,399 --> 00:01:00,519
在可汗学院的所有的程序中

25
00:01:00,519 --> 00:01:02,729
都是能直接用的

26
00:01:02,729 --> 00:01:05,339
当然你也可以自己写个函数

27
00:01:05,339 --> 00:01:08,409
然后在自己的程序里调用

28
00:01:08,409 --> 00:01:11,430
举个栗子 假设我们要写个程序

29
00:01:11,430 --> 00:01:14,434
我们想画很多次的温斯顿(黄脸娃娃)

30
00:01:14,434 --> 00:01:17,017
因为我们可能会讲讲温斯顿的人生历程

31
00:01:17,017 --> 00:01:20,190
并把每个年龄段的它都展示出来

32
00:01:20,190 --> 00:01:24,243
所以我们开始写画出温斯顿的代码了

33
00:01:24,243 --> 00:01:27,106
我们这里用 faceX 和 faceY 两个变量

34
00:01:27,106 --> 00:01:29,029
来规定脸部的中心位置

35
00:01:29,029 --> 00:01:31,243
之后画眼睛和鼻子的时候

36
00:01:31,243 --> 00:01:33,039
就能参照这两个变量了

37
00:01:33,039 --> 00:01:34,732
现在程序认得这些代码了

38
00:01:34,732 --> 00:01:37,325
但它还不是函数 所以程序运行了一下

39
00:01:37,325 --> 00:01:39,739
然后也只能就运行一次

40
00:01:39,739 --> 00:01:43,717
所以我们就来把它转成函数吧

41
00:01:43,717 --> 00:01:46,439
转化的步骤很像

42
00:01:46,439 --> 00:01:48,487
声明变量那样 因为实际上

43
00:01:48,487 --> 00:01:50,245
就是一样的

44
00:01:50,245 --> 00:01:52,077
我们敲上 var drawWinston

45
00:01:52,077 --> 00:01:54,551
这个名字不错 生动又形象

46
00:01:54,551 --> 00:01:59,037
再敲上 = 号 然后接的就不是数字或字符串了

47
00:01:59,037 --> 00:02:02,721
我们要接的是 function 不要拼写错了

48
00:02:02,721 --> 00:02:08,357
然后是小括号 () 再后是前大括号 {

49
00:02:08,357 --> 00:02:11,563
接着后大括号 } 最后是分号 ;

50
00:02:11,563 --> 00:02:14,490
所以我们接下来就是要把所有

51
00:02:14,490 --> 00:02:19,454
函数要用的功能都放进大括号里

52
00:02:19,454 --> 00:02:22,130
所以我们要把底下的所有代码

53
00:02:22,130 --> 00:02:26,816
都放进我们的函数里 缩进下更好看 啦啦

54
00:02:26,816 --> 00:02:28,970
所以我们现在就把这些变量

55
00:02:28,970 --> 00:02:32,379
整理成函数了 基本上我们是

56
00:02:32,379 --> 00:02:35,759
把这块代码贴上了个标签 然后我们就能

57
00:02:35,759 --> 00:02:37,859
随时告诉自己的程序：

58
00:02:37,859 --> 00:02:40,765
嘿 找出带那标签的那段代码 运行它！

59
00:02:40,765 --> 00:02:43,551
我们把这段代码转成可重复使用的了

60
00:02:43,551 --> 00:02:46,535
但是别忘了 温斯顿不见了

61
00:02:46,535 --> 00:02:49,357
我们弄丢了温斯顿 他人跑去哪儿了呢

62
00:02:49,357 --> 00:02:53,025
好吧 其实是我们把代码放进函数里之后

63
00:02:53,025 --> 00:02:55,907
相当于是告诉程序 嘿 这里的这些代码

64
00:02:55,907 --> 00:02:57,842
是我想稍后还能用的

65
00:02:57,842 --> 00:03:00,807
但只有我叫你用时 你才能用

66
00:03:00,807 --> 00:03:04,288
所以我们就得叫程序运行这段代码

67
00:03:04,288 --> 00:03:09,110
这就要“调用”函数 就跟使用ellipse() rect() line()一样

68
00:03:09,400 --> 00:03:13,753
所以我们只要敲上函数名 drawWinston

69
00:03:13,753 --> 00:03:16,376
后面接上小括号()

70
00:03:16,376 --> 00:03:18,959
还有记得加上分号 啦啦

71
00:03:18,959 --> 00:03:20,942
温斯顿出来了

72
00:03:20,942 --> 00:03:24,237
好了 我觉得棒极了 但你可能无语了

73
00:03:24,237 --> 00:03:27,373
因为我们相当于是把之前程序所做的

74
00:03:27,373 --> 00:03:30,239
又做了一遍 有点傻是吧

75
00:03:30,239 --> 00:03:32,920
不过函数的关键就是它能重复使用

76
00:03:32,920 --> 00:03:34,957
所以我们现在要开工了

77
00:03:34,957 --> 00:03:41,162
我们只需不断复制黏贴这个函数就可以了

78
00:03:41,162 --> 00:03:46,572
额... 看起来没变嘛 但其实是有的

79
00:03:46,572 --> 00:03:48,998
它画了多个温斯顿 可问题在于

80
00:03:48,998 --> 00:03:51,474
它们完全重叠在一起了

81
00:03:51,474 --> 00:03:54,428
如果有X光的话 我们就可以扫一下那图象

82
00:03:54,428 --> 00:03:57,631
然后就能看到三个温斯顿了 但我可没X光眼

83
00:03:57,631 --> 00:04:00,334
也许你有吧

84
00:04:00,334 --> 00:04:03,440
但我们可以对函数做些小修改

85
00:04:03,440 --> 00:04:05,486
然后就能看到了

86
00:04:05,486 --> 00:04:08,825
你看 faceX 和 faceY 总是202和208没有

87
00:04:08,825 --> 00:04:11,587
我们能用 random() 函数来做点改变

88
00:04:11,587 --> 00:04:14,849
比如 random() 范围设成50到350 它就会

89
00:04:14,849 --> 00:04:19,183
在范围里随机挑选一个数字 下面也是一样

90
00:04:19,183 --> 00:04:23,023
这样每次调用这个函数时 它都会随机生成新数

91
00:04:23,023 --> 00:04:26,566
如果我们点下刷新 温斯顿就会随机再现

92
00:04:26,566 --> 00:04:29,359
棒呆了 哇

93
00:04:29,359 --> 00:04:32,095
好了 我觉得这棒极了 因为本来这是要

94
00:04:32,095 --> 00:04:34,916
写很多代码才能实现的 而有函数就省事多了

95
00:04:34,916 --> 00:04:38,317
本来是要当前代码量的三倍的

96
00:04:38,317 --> 00:04:40,960
不过这还不够实用

97
00:04:40,960 --> 00:04:43,796
因为我们也许不想要随机的温斯顿

98
00:04:43,796 --> 00:04:45,736
我们可能想要的是固定的温斯顿

99
00:04:45,736 --> 00:04:47,846
想让它固定在屏幕的某个特定位置

100
00:04:47,846 --> 00:04:49,943
那么敬请期待 因为下次我们就会讲

101
00:04:49,943 --> 00:04:52,483
如何给这个函数传递参数 从而得到

102
00:04:52,000 --> 00:04:56,000
位置固定的温斯顿