1
00:00:00,960 --> 00:00:03,029
讓我們探索更多繪圖的事情吧

2
00:00:03,029 --> 00:00:05,270
除了長方形外，我們還可以畫什麼？

3
00:00:05,270 --> 00:00:07,716
我們能用ellipse這個字來畫橢圓形

4
00:00:07,716 --> 00:00:09,442
這是另一個電腦明白的指令

5
00:00:09,798 --> 00:00:12,775
我們其實有一個特殊的程設用詞來代表指令

6
00:00:12,775 --> 00:00:14,751
我們把它們稱作「函數」

7
00:00:14,751 --> 00:00:17,790
從現在起我會使用函數這詞來代表指令

8
00:00:18,510 --> 00:00:20,836
我們繼續寫入ellipse這函數

9
00:00:20,836 --> 00:00:22,790
然後括號 () 及一個分號 ;

10
00:00:23,000 --> 00:00:24,005
行不通！

11
00:00:24,005 --> 00:00:26,136
出現了這個有關參數的錯誤訊息

12
00:00:26,136 --> 00:00:27,367
無論哪是什麼

13
00:00:27,367 --> 00:00:30,330
跟我們剛用rect來寫的比較，你能看到我們少了什麼嗎？

14
00:00:30,872 --> 00:00:33,291
我們剛寫入ellipse時，我們沒有給它數字

15
00:00:33,291 --> 00:00:35,030
像我們畫長方形時所做的

16
00:00:35,030 --> 00:00:37,060
這些數字在這裡稱作「參數」

17
00:00:37,460 --> 00:00:40,500
我們說我們傳遞參數去函數裏

18
00:00:40,500 --> 00:00:43,000
它們控制函數如何運作

19
00:00:45,470 --> 00:00:46,523
沒有這些參數

20
00:00:46,523 --> 00:00:48,716
程式便不知道你想將橢圓形畫在哪裡

21
00:00:48,716 --> 00:00:49,901
或要把它畫得多大

22
00:00:50,151 --> 00:00:52,530
現在那錯誤訊息顯得比較合理了

23
00:00:52,530 --> 00:00:54,717
讓我們繼續傳入四個參數

24
00:00:54,717 --> 00:01:00,665
來控制我們要那橢圓形向右移多少、向下移多少、多寬、和多高

25
00:01:00,753 --> 00:01:03,771
就像先前，我們可以找點樂趣，將我們的橢圓形移來移去

26
00:01:03,771 --> 00:01:05,775
甚至將它變大變小

27
00:01:08,205 --> 00:01:11,633
現在我們已有基本知識，來試畫一個大橢圓形

28
00:01:11,633 --> 00:01:13,292
在畫布的正中央

29
00:01:13,962 --> 00:01:16,535
第一個你可能會提出的的問題是：中央在哪裡？

30
00:01:17,505 --> 00:01:20,299
複習一下，左上角是0

31
00:01:20,299 --> 00:01:25,490
右邊，如果你記得的話，是400，而最下方也是400

32
00:01:25,490 --> 00:01:27,761
所以如果我們想想：正中央會在哪呢？

33
00:01:27,761 --> 00:01:31,285
我們會說：是向右400的一半，所以200

34
00:01:31,285 --> 00:01:33,759
然後向下400的一半，所以200

35
00:01:33,759 --> 00:01:34,894
我們就那樣做

36
00:01:34,894 --> 00:01:36,746
來用我們的ellipse函數

37
00:01:36,746 --> 00:01:40,788
傳入參數，去做一個挺大的橢圓形

38
00:01:41,468 --> 00:01:42,810
有了！

39
00:01:43,480 --> 00:01:45,772
只是好玩，讓我們也放一個長方形在那

40
00:01:46,242 --> 00:01:50,216
寫入 rect(200, 200 ，也許小一點，100, 100);

41
00:01:50,216 --> 00:01:53,005
嗯，這蠻有趣的

42
00:01:53,005 --> 00:01:54,813
這小小的實驗告訴我們什麼？

43
00:01:55,183 --> 00:01:58,000
我們可以看到 200, 200 的點

44
00:01:58,000 --> 00:02:01,767
實際上是指我們該放置橢圓形的中心位置

45
00:02:01,767 --> 00:02:04,498
但對長方形卻是不同的，因為對長方形來說

46
00:02:04,498 --> 00:02:08,539
200, 200 是指我們放置長方形的左上角位置

47
00:02:09,969 --> 00:02:13,202
那是我們試定圖形位置時須記住的

48
00:02:14,752 --> 00:02:16,565
現在讓我們進入簡易線形

49
00:02:16,825 --> 00:02:19,278
函數名稱就叫做line而已

50
00:02:19,478 --> 00:02:21,773
我們又傳入四個參數給它

51
00:02:21,773 --> 00:02:24,984
但一條線的大小跟一個長方形的不太一樣，對吧？

52
00:02:25,234 --> 00:02:27,315
所以那這些數字會控制什麼？

53
00:02:28,485 --> 00:02:31,270
第一個和第二個參數，跟之前一樣

54
00:02:31,270 --> 00:02:34,265
指的是這條線應該從多右方及多下方開始

55
00:02:34,545 --> 00:02:36,561
而第二之後的參數 --

56
00:02:36,981 --> 00:02:40,017
對不起，是第二組參數，90和200

57
00:02:40,017 --> 00:02:43,603
將代表這條線應該在多右方及多下方終止

58
00:02:46,523 --> 00:02:48,242
現在我們了解那是如何運作

59
00:02:48,242 --> 00:02:51,761
讓我們來看看某些一開始會看起來相當奇怪的東西

60
00:02:52,501 --> 00:02:55,761
如果我使長方形在左上角起始的話

61
00:02:55,761 --> 00:03:00,181
然後再指定那長方形的左上角的話，會令什麼事情發生？

62
00:03:00,911 --> 00:03:02,861
且相當大

63
00:03:03,991 --> 00:03:07,017
我們甚至可以使它那麼大，但我想那有點太大了

64
00:03:07,777 --> 00:03:11,760
我們看到它逐漸開始令橢圓形消失

65
00:03:11,880 --> 00:03:13,800
我們其實可以使它完全消失

66
00:03:14,760 --> 00:03:16,543
現在我們懷疑它跑去哪了

67
00:03:17,773 --> 00:03:21,502
這程式所做的是依照次序地繪製你的圖形

68
00:03:21,502 --> 00:03:24,702
首先它畫出橢圓形，然後它畫那長方形在上面

69
00:03:24,702 --> 00:03:26,502
最後它便畫線條

70
00:03:26,502 --> 00:03:29,762
所以橢圓形仍然在那，只是像你看到的，在底下而已

71
00:03:30,772 --> 00:03:32,500
這是要記住的很重要的一點

72
00:03:32,500 --> 00:03:35,808
因為如果我們先畫線條的話會發生什麼事？

73
00:03:36,498 --> 00:03:38,520
我們就完全看不到它了，不是嗎？

74
00:03:38,520 --> 00:03:41,730
你可能會在程式中那麼做然後懷疑：我的線跑哪去了？

75
00:03:41,740 --> 00:03:45,023
事實是它還在那，只是現在被掩蓋住

76
00:03:45,023 --> 00:03:48,080
被橢圓形及長方形同時所掩蓋

77
00:03:50,250 --> 00:03:53,501
我們能控制哪些圖形被畫在哪其他圖形的上面

78
00:03:53,501 --> 00:03:56,562
藉著改變它們被寫入在程式中的次序

79
00:03:58,592 --> 00:04:02,251
現在，我想在我們結束之前介紹一些技術用語

80
00:04:02,770 --> 00:04:04,512
就像你可能已在數學中學到的

81
00:04:04,512 --> 00:04:07,814
我們可以用x這個字母來表示向右移多少

82
00:04:07,814 --> 00:04:09,216
就像我們提過的

83
00:04:09,216 --> 00:04:11,528
用y字母表示向下移多少

84
00:04:11,528 --> 00:04:14,001
不習慣的話那可能看似有點奇怪

85
00:04:14,001 --> 00:04:18,722
但它是比每次說「向右移多少和向下移多少」容易

86
00:04:19,493 --> 00:04:22,216
我們橢圓形的前兩個參數，例如說

87
00:04:22,216 --> 00:04:27,528
在說x該是200，而y該是229

88
00:04:28,968 --> 00:04:30,250
現在你們知道了

89
00:04:30,250 --> 00:04:33,042
就跟說「向右移多少和向下移多少」一樣

90
00:04:33,982 --> 00:04:36,034
一個你可能會提出的第二個非常好的問題是：

91
00:04:36,034 --> 00:04:38,624
這整個時間我們使用的是什麼單位？

92
00:04:38,794 --> 00:04:42,763
我們說的是200公分、200英寸還是200英里？

93
00:04:42,763 --> 00:04:44,810
我們使用的單位稱作「像素」

94
00:04:45,260 --> 00:04:47,897
而一個像素是你螢幕上一個微小的點

95
00:04:48,477 --> 00:04:51,957
這個畫布事實上就是400像素寬

96
00:04:52,287 --> 00:04:56,497
那就是為什麼我們總是說左上角是0

97
00:04:56,497 --> 00:05:00,588
然後向右到底是400，因為它是400個像素

98
00:05:01,508 --> 00:05:04,865
類似地，當我們說200，實際上我們指的是200個像素

99
00:05:04,865 --> 00:05:06,540
你該已懂了

100
00:05:07,180 --> 00:05:08,303
太好了！

101
00:05:08,303 --> 00:05:10,788
現在你已經完全了解函數 line、ellipse、和rect

102
00:05:10,788 --> 00:05:12,003
以及它們的參數

103
00:05:12,253 --> 00:05:14,761
我們已經涵蓋了很多，只要堅持下去，持續發掘

104
00:05:14,761 --> 00:05:16,423
很快你便會找到它的竅門