WEBVTT

00:00:00.877 --> 00:00:06.001
我们又回到了“画温斯顿”这个程序了，
但是我添加了一些文字。

00:00:06.001 --> 00:00:11.072
看，我想做的是在把温斯顿放在这些标签下面，

00:00:11.072 --> 00:00:13.210
显示他不同的人生阶段。

00:00:13.432 --> 00:00:14.903
现在他在屏幕上到处乱窜。

00:00:15.557 --> 00:00:19.676
这是因为在该函数里，
我们把faceX和faceY 设置成了随机数。

00:00:20.457 --> 00:00:26.714
但是，我们想做的事情是——
嘿，我想你把温斯顿画到我指定的这个位置。

00:00:26.714 --> 00:00:30.316
我希望每次调用函数的时候，
我都能准确说明它的位置，

00:00:30.316 --> 00:00:32.648
就像我们放置椭圆和矩形的时候一样。

00:00:34.048 --> 00:00:40.460
我想要把温斯顿放在这里、这里，
还有一个温斯顿在这里、一个温斯顿在这里。

00:00:40.460 --> 00:00:43.623
我不希望我每次调用函数的时候，
他满世界随机乱跑。

00:00:44.762 --> 00:00:48.882
要做到这一点，我们要设置该函数里的参数，

00:00:48.882 --> 00:00:52.502
既要在函数定义里设置参数——就是顶部这里，

00:00:52.811 --> 00:00:57.302
也要是调用函数这里设置参数——
就是下面这里我们实际调用参数的时候。

00:00:57.302 --> 00:01:02.210
在画温斯顿的时候，
我们传递的函数参数为faceX和faxeY，

00:01:02.210 --> 00:01:09.058
我们要让该函数使用我们传递的值，
而不是生成随机数。

00:01:10.428 --> 00:01:14.657
我们先这样想，我们传递完值后，
下面这些函数会如何调用它们呢。

00:01:14.657 --> 00:01:17.541
我们想要把温斯顿放在每行标题文字下面，

00:01:17.621 --> 00:01:24.491
这样每个温斯顿的X坐标跟Y坐标应该
跟这些标题文字的坐标很接近。

00:01:24.491 --> 00:01:28.236
可能温斯顿的Y坐标
比标题文字的Y坐标低10个像素左右。

00:01:28.476 --> 00:01:40.891
那第一个的X、Y坐标就应该是10、30，
然后是200、230；10、 230； 200、 230。

00:01:40.891 --> 00:01:44.863
这跟标题文字的坐标是一样的。
只是每一个Y坐标我加了10，

00:01:44.863 --> 00:01:47.405
因为我想把它放低一点点而已。

00:01:49.985 --> 00:01:51.408
但是温斯顿没有动。

00:01:51.587 --> 00:01:59.177
这是因为我们还没有告诉上面的函数我们要传递参数了，所以它还在用这些随机数值。

00:01:59.177 --> 00:02:03.603
要告诉这些函数，“我们要给你这些信息啦”，

00:02:03.603 --> 00:02:08.398
我们一定要在这些括号里面打入这些参数的名字。

00:02:08.398 --> 00:02:14.106
我们将其命名为 faceX 和 face Y, 用逗号分隔开。

00:02:15.269 --> 00:02:20.704
我们这样命名是因为在该函数里面
我们已经用了这些名字，

00:02:20.704 --> 00:02:23.472
这样我们就不用重写其他代码了。

00:02:25.112 --> 00:02:28.813
但是，还是什么都没有发生。
温斯顿还是在满世界乱跑。

00:02:28.813 --> 00:02:31.353
如果你在看回来顶部的函数，

00:02:31.353 --> 00:02:35.263
你会发现随机数值还是覆盖在faceX和faceY上。

00:02:36.099 --> 00:02:38.793
所以我们要做的就是把这两行都删掉。

00:02:38.793 --> 00:02:46.237
现在，faceX和faceY传递到函数里了，

00:02:46.237 --> 00:02:49.581
而且它在使用我们在下面调用的值。

00:02:49.581 --> 00:02:53.911
但是如你所见，温斯顿摆放的位置不是很正确，

00:02:53.911 --> 00:03:01.151
因为我忘记了文字应该左对齐，脸则应该是居中。

00:03:02.071 --> 00:03:06.383
所以我只需要修改一下我的数字是吧。

00:03:06.383 --> 00:03:12.608
我要把 X 坐标右移很多, Y坐标下移一点。
好了，孩童时期的温斯顿弄好了。

00:03:12.608 --> 00:03:14.268
我们继续。

00:03:14.708 --> 00:03:22.518
我们现在只要修改一下函数的参数值即可，完全不用重新定义函数。

00:03:22.518 --> 00:03:25.758
它会使用我们传递的值，

00:03:26.718 --> 00:03:28.388
就像制作椭圆和矩形的时候一样。

00:03:28.388 --> 00:03:33.348
现在我已经差不多摆放好了，
但是我又注意到温斯顿有点大。

00:03:33.348 --> 00:03:35.756
几个温斯顿重叠在一起。
他的大小不大对劲。

00:03:35.756 --> 00:03:39.019
因为我是写了一个代码，
用函数把温斯顿画出来的，

00:03:39.019 --> 00:03:42.374
我也是一下子就可以改变全部的大小，

00:03:42.374 --> 00:03:45.439
只要修改这一行画椭圆的代码即可。

00:03:45.439 --> 00:03:50.626
我们看看改成190x190怎么样。
耶，温斯顿减肥了。

00:03:50.626 --> 00:03:55.964
现在他的大小合适了。
然后，我还可以微调一下位置。

00:03:55.964 --> 00:04:01.902
这样我就能把它放进去了是不是？
好酷！

00:04:03.541 --> 00:04:08.531
我们再来回顾一下这个函数的功能。
它定义了一个叫做“画温斯顿”的函数，

00:04:08.531 --> 00:04:14.673
它将采用两个值，
这两个值的名字叫faceX和faceY。

00:04:14.673 --> 00:04:19.949
实际上这两个值就是参数，
我们可以在整个函数里使用它们，

00:04:19.949 --> 00:04:23.055
就像我们以前使用在顶部声明的参数一样，

00:04:23.055 --> 00:04:29.113
我们声明完函数之后就可以随时调用它们，

00:04:29.113 --> 00:04:33.711
我们可以传递不同的值。
它也会每次使用新输入的值。

00:04:34.975 --> 00:04:37.181
你也见证了这些函数的神奇效应，

00:04:37.588 --> 00:04:41.090
我们可以设计一些我们觉得可以重复使用的代码，

00:04:41.436 --> 00:04:46.460
但是我们也可以用参数说，
“嘿，你可以在这里修改一下这个代码。”

00:04:46.460 --> 00:04:49.405
就像是一个菜谱，
你写下总体指令，

00:04:49.405 --> 00:04:52.810
然后你突然发现你要喂的
不只是一个温斯顿，而是四个，

00:04:53.083 --> 00:04:54.748
你不用一切重新开始，

00:04:54.802 --> 00:04:57.632
你只需要调整一下原始指令，并把一切乘上4即可。

00:04:58.005 --> 00:05:02.205
现在你可以开始想自己代码里的菜谱啦！
哇！真好吃！