WEBVTT

00:00:00.960 --> 00:00:03.029
讓我們探索更多繪圖的事情吧

00:00:03.029 --> 00:00:05.270
除了長方形外，我們還可以畫什麼？

00:00:05.270 --> 00:00:07.716
我們能用ellipse這個字來畫橢圓形

00:00:07.716 --> 00:00:09.442
這是另一個電腦明白的指令

00:00:09.798 --> 00:00:12.775
我們其實有一個特殊的程設用詞來代表指令

00:00:12.775 --> 00:00:14.751
我們把它們稱作「函數」

00:00:14.751 --> 00:00:17.790
從現在起我會使用函數這詞來代表指令

00:00:18.510 --> 00:00:20.836
我們繼續寫入ellipse這函數

00:00:20.836 --> 00:00:22.790
然後括號 () 及一個分號 ;

00:00:23.000 --> 00:00:24.005
行不通！

00:00:24.005 --> 00:00:26.136
出現了這個有關參數的錯誤訊息

00:00:26.136 --> 00:00:27.367
無論哪是什麼

00:00:27.367 --> 00:00:30.330
跟我們剛用rect來寫的比較，你能看到我們少了什麼嗎？

00:00:30.872 --> 00:00:33.291
我們剛寫入ellipse時，我們沒有給它數字

00:00:33.291 --> 00:00:35.030
像我們畫長方形時所做的

00:00:35.030 --> 00:00:37.060
這些數字在這裡稱作「參數」

00:00:37.460 --> 00:00:40.500
我們說我們傳遞參數去函數裏

00:00:40.500 --> 00:00:43.000
它們控制函數如何運作

00:00:45.470 --> 00:00:46.523
沒有這些參數

00:00:46.523 --> 00:00:48.716
程式便不知道你想將橢圓形畫在哪裡

00:00:48.716 --> 00:00:49.901
或要把它畫得多大

00:00:50.151 --> 00:00:52.530
現在那錯誤訊息顯得比較合理了

00:00:52.530 --> 00:00:54.717
讓我們繼續傳入四個參數

00:00:54.717 --> 00:01:00.665
來控制我們要那橢圓形向右移多少、向下移多少、多寬、和多高

00:01:00.753 --> 00:01:03.771
就像先前，我們可以找點樂趣，將我們的橢圓形移來移去

00:01:03.771 --> 00:01:05.775
甚至將它變大變小

00:01:08.205 --> 00:01:11.633
現在我們已有基本知識，來試畫一個大橢圓形

00:01:11.633 --> 00:01:13.292
在畫布的正中央

00:01:13.962 --> 00:01:16.535
第一個你可能會提出的的問題是：中央在哪裡？

00:01:17.505 --> 00:01:20.299
複習一下，左上角是0

00:01:20.299 --> 00:01:25.490
右邊，如果你記得的話，是400，而最下方也是400

00:01:25.490 --> 00:01:27.761
所以如果我們想想：正中央會在哪呢？

00:01:27.761 --> 00:01:31.285
我們會說：是向右400的一半，所以200

00:01:31.285 --> 00:01:33.759
然後向下400的一半，所以200

00:01:33.759 --> 00:01:34.894
我們就那樣做

00:01:34.894 --> 00:01:36.746
來用我們的ellipse函數

00:01:36.746 --> 00:01:40.788
傳入參數，去做一個挺大的橢圓形

00:01:41.468 --> 00:01:42.810
有了！

00:01:43.480 --> 00:01:45.772
只是好玩，讓我們也放一個長方形在那

00:01:46.242 --> 00:01:50.216
寫入 rect(200, 200 ，也許小一點，100, 100);

00:01:50.216 --> 00:01:53.005
嗯，這蠻有趣的

00:01:53.005 --> 00:01:54.813
這小小的實驗告訴我們什麼？

00:01:55.183 --> 00:01:58.000
我們可以看到 200, 200 的點

00:01:58.000 --> 00:02:01.767
實際上是指我們該放置橢圓形的中心位置

00:02:01.767 --> 00:02:04.498
但對長方形卻是不同的，因為對長方形來說

00:02:04.498 --> 00:02:08.539
200, 200 是指我們放置長方形的左上角位置

00:02:09.969 --> 00:02:13.202
那是我們試定圖形位置時須記住的

00:02:14.752 --> 00:02:16.565
現在讓我們進入簡易線形

00:02:16.825 --> 00:02:19.278
函數名稱就叫做line而已

00:02:19.478 --> 00:02:21.773
我們又傳入四個參數給它

00:02:21.773 --> 00:02:24.984
但一條線的大小跟一個長方形的不太一樣，對吧？

00:02:25.234 --> 00:02:27.315
所以那這些數字會控制什麼？

00:02:28.485 --> 00:02:31.270
第一個和第二個參數，跟之前一樣

00:02:31.270 --> 00:02:34.265
指的是這條線應該從多右方及多下方開始

00:02:34.545 --> 00:02:36.561
而第二之後的參數 --

00:02:36.981 --> 00:02:40.017
對不起，是第二組參數，90和200

00:02:40.017 --> 00:02:43.603
將代表這條線應該在多右方及多下方終止

00:02:46.523 --> 00:02:48.242
現在我們了解那是如何運作

00:02:48.242 --> 00:02:51.761
讓我們來看看某些一開始會看起來相當奇怪的東西

00:02:52.501 --> 00:02:55.761
如果我使長方形在左上角起始的話

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

00:03:00.911 --> 00:03:02.861
且相當大

00:03:03.991 --> 00:03:07.017
我們甚至可以使它那麼大，但我想那有點太大了

00:03:07.777 --> 00:03:11.760
我們看到它逐漸開始令橢圓形消失

00:03:11.880 --> 00:03:13.800
我們其實可以使它完全消失

00:03:14.760 --> 00:03:16.543
現在我們懷疑它跑去哪了

00:03:17.773 --> 00:03:21.502
這程式所做的是依照次序地繪製你的圖形

00:03:21.502 --> 00:03:24.702
首先它畫出橢圓形，然後它畫那長方形在上面

00:03:24.702 --> 00:03:26.502
最後它便畫線條

00:03:26.502 --> 00:03:29.762
所以橢圓形仍然在那，只是像你看到的，在底下而已

00:03:30.772 --> 00:03:32.500
這是要記住的很重要的一點

00:03:32.500 --> 00:03:35.808
因為如果我們先畫線條的話會發生什麼事？

00:03:36.498 --> 00:03:38.520
我們就完全看不到它了，不是嗎？

00:03:38.520 --> 00:03:41.730
你可能會在程式中那麼做然後懷疑：我的線跑哪去了？

00:03:41.740 --> 00:03:45.023
事實是它還在那，只是現在被掩蓋住

00:03:45.023 --> 00:03:48.080
被橢圓形及長方形同時所掩蓋

00:03:50.250 --> 00:03:53.501
我們能控制哪些圖形被畫在哪其他圖形的上面

00:03:53.501 --> 00:03:56.562
藉著改變它們被寫入在程式中的次序

00:03:58.592 --> 00:04:02.251
現在，我想在我們結束之前介紹一些技術用語

00:04:02.770 --> 00:04:04.512
就像你可能已在數學中學到的

00:04:04.512 --> 00:04:07.814
我們可以用x這個字母來表示向右移多少

00:04:07.814 --> 00:04:09.216
就像我們提過的

00:04:09.216 --> 00:04:11.528
用y字母表示向下移多少

00:04:11.528 --> 00:04:14.001
不習慣的話那可能看似有點奇怪

00:04:14.001 --> 00:04:18.722
但它是比每次說「向右移多少和向下移多少」容易

00:04:19.493 --> 00:04:22.216
我們橢圓形的前兩個參數，例如說

00:04:22.216 --> 00:04:27.528
在說x該是200，而y該是229

00:04:28.968 --> 00:04:30.250
現在你們知道了

00:04:30.250 --> 00:04:33.042
就跟說「向右移多少和向下移多少」一樣

00:04:33.982 --> 00:04:36.034
一個你可能會提出的第二個非常好的問題是：

00:04:36.034 --> 00:04:38.624
這整個時間我們使用的是什麼單位？

00:04:38.794 --> 00:04:42.763
我們說的是200公分、200英寸還是200英里？

00:04:42.763 --> 00:04:44.810
我們使用的單位稱作「像素」

00:04:45.260 --> 00:04:47.897
而一個像素是你螢幕上一個微小的點

00:04:48.477 --> 00:04:51.957
這個畫布事實上就是400像素寬

00:04:52.287 --> 00:04:56.497
那就是為什麼我們總是說左上角是0

00:04:56.497 --> 00:05:00.588
然後向右到底是400，因為它是400個像素

00:05:01.508 --> 00:05:04.865
類似地，當我們說200，實際上我們指的是200個像素

00:05:04.865 --> 00:05:06.540
你該已懂了

00:05:07.180 --> 00:05:08.303
太好了！

00:05:08.303 --> 00:05:10.788
現在你已經完全了解函數 line、ellipse、和rect

00:05:10.788 --> 00:05:12.003
以及它們的參數

00:05:12.253 --> 00:05:14.761
我們已經涵蓋了很多，只要堅持下去，持續發掘

00:05:14.761 --> 00:05:16.423
很快你便會找到它的竅門